Case: jquery enable button

jquery version 1.7.1
All code run successful in platform such as chrome, firefox and ie.
1.How to enable the button use jquery?
2.How to check if button is enabled use jquery?
3.Demo for jquery enable button
3.1 enable the button when click a link
3.2 enable all disable button in webapge using jquery

1.How to enable the button use jquery?

There are two ways to change the button state from disable to enable.
the first way:change the boolean value from true to false

$("#xxx").attr("disabled",false);

the second way:remove the disabled attribute

$("#xxx").removeAttr("disabled");

Tip:
1.when we enable a button the html code will remove the disabled attribute
disabled state:<input id="xxx" type="button" value="Button" disabled="disabled">
enabled state:<input id="xxx" type="button" value="Button">
2.The disabled property of JavaScript need to set the value to null.

document.getElementById("xxx").disabled = null;

2.How to check if button is enabled use jquery?

In jQuery you can use the “is” function to check if the button is enabled like this:

if ($('#xxx').is(':disabled') == false) {}

The jquery "is" api please see http://api.jquery.com/is/

3.Demo for jquery enable button

3.1 enable the button when click a link

Demo:

Click Me

Below is the source code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#bid").attr("disabled","disabled");
});
function enableButton(id){
    $("#bid").attr("disabled",false);
    //$("#bid").removeAttr("disabled");
}
</script>
</head>
<body>
<input id="bid" type="button" value="Target Button">
<a href="#" onclick="enableButton('bid');">Click Me</a>
</body>
</html>

3.2 enable all disable button in webapge using jquery

Demo:

Below is the source code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#bid1").attr("disabled","disabled");
 $("#cid").click(function(){
  //Traverse all disable button
  $(":button").each(function(){ 
   if ($(this).is(':disabled') == true) {   
    //$(this).attr("disabled",false);
    $(this).removeAttr("disabled");
   }
  });
 });
});
</script>
</head>
<body>
<input id="cid" type="button" value="Click Me">
<input id="bid1" type="button" value="Target Button1">
<input id="bid2" type="button" value="Target Button2" disabled="disabled">
<input id="bid3" type="button" value="Target Button3">
</body>
</html>

Related Articles
jquery disable button

Case

Wednesday, February 15, 2012

jquery enable button

Demo:

Demo:

1 comment: