CODEWITHSUNDEEP
javascripttwitter-bootstraptwitter-bootstrap-3
user7455856
user7455856

Reputation: 11

How to disable a bootstrap div which uses button class

How to disable a bootstrap div which uses button class. Button to be disabled using javascript based on some conditions

This is my code for button which is to be disabled using 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>

Upvotes: 1

Views: 7943

Answers (2)

neophyte
neophyte

Reputation: 6626

The div can be hidden in this way---

$('.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>

If you want to hide the div with onclick event you can do it in this way--

              $('.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>

NOW IN THIS WAY YOU CAN DISABLE IT

<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>

As you are just beginning with js and xml.

This example can be helpful

Now if you want to disable the button based on some value do it like this--

NOTE this just a rough way to give you some idea. In this example you have two value hi and bye which are coming from your xml and getting displayed on the HTML page. So based on that value you are disabling the 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>

Upvotes: 2

Ashok Kumawat
Ashok Kumawat

Reputation: 643

Try this :

  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";
    }

Working fiddle

Upvotes: 0

Related Questions