如何禁用使用按钮类的引导程序 div

如何禁用使用按钮类的引导div。根据某些条件使用 javascript 禁用按钮

这是我的按钮代码，该按钮将使用js禁用：

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-info col-sm-3">
        <i class="glyphicon glyphicon-send" ></i>
        <br>
        Send
    </a>
</div>

div 可以通过这种方式隐藏---

$('.zz').css('display', 'none');

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
  </head>
    <body>
     <div class="btn-group btn-group-justified zz" id="btn-disable">
              <a href="#" class="btn btn-info col-sm-3">
                <i class="glyphicon glyphicon-send" ></i><br>
                Send
              </a>
            </div>  
</body>
  </html>

如果你想用onclick事件隐藏div，你可以这样做——

              $('.zz').click(function(){
              $('.zz').css('display', 'none');
            });

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
  </head>
    <body>
     <div class="btn-group btn-group-justified zz" id="btn-disable">
              <a href="#" class="btn btn-info col-sm-3" >
                <i class="glyphicon glyphicon-send" ></i><br>
                Send
              </a>
             </div> 
</body>
  </html>

现在通过这种方式您可以禁用它

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
         
  </head>
    <body>
     <div class="btn-group btn-group-justified zz" id="btn-disable">
              <a href="#" class="btn btn-info col-sm-3" >
                <i class="glyphicon glyphicon-send" ></i><br>
                Send
              </a>
              <script type="text/javascript">
              $('.zz').click(function(){
             $(".zz *").attr("disabled", "disabled").off('click');
            });
   
          </script>
       </div>
</body>
  </html>

因为你刚刚开始使用js和xml。

这个例子可能会有所帮助

现在，如果您想根据某些值禁用按钮，请这样做 -

注意这只是给你一些想法的粗略方法。在此示例中，您有两个值hi和bye，它们来自您的xml并显示在HTML页面上。因此，根据该值，您将禁用div。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
  </head>
    <body>
      <div class="btn-group btn-group-justified zz2" id="btn-disable2">
              <a href="#" class="btn btn-info col-sm-3" >
                <i class="glyphicon glyphicon-send" ></i><br>
                bye
              </a>
        </div>
     <div class="btn-group btn-group-justified zz1" id="btn-disable1">
              <a href="#" class="btn btn-info col-sm-3" >
                <i class="glyphicon glyphicon-send" ></i><br>
                hi
              </a>
       </div>
              <script type="text/javascript">
                var node = document.getElementById('btn-disable2');
textContent = node.textContent;
                alert($.trim(textContent));
             if ($.trim(textContent) == 'bye') {
             $(".zz2 *").attr("disabled", "disabled").off('click');
            }
   
       var node1 = document.getElementById('btn-disable1');
textContent1 = node1.textContent;
                alert($.trim(textContent1));
             if ($.trim(textContent1) == 'bye') {
             $(".zz1 *").attr("disabled", "disabled").off('click');
            }
                   </script>
       
</body>
  </html>

试试这个：

  document.getElementsByClassName("btn")[0].style.pointerEvents = "none";
  var timestampArray = document.getElementsByClassName("btn");
    for(var i = (timestampArray.length - 1); i >= 0; i--)
    {
        timestampArray[i].style.pointerEvents = "none";
    }

工作小提琴

相关内容

最新更新

热门标签：