How to enable button when checkbox clicked in jQuery?
-
1Show some effort here and post your code. Otherwise close.Yves M.– Yves M.2010-08-25 12:15:34 +00:00Commented Aug 25, 2010 at 12:15
Add a comment
|
3 Answers
You can do it like this:
$("#checkBoxID").click(function() {
$("#buttonID").attr("disabled", !this.checked);
});
This enables when checked, and disables again if you uncheck. In jQuery .attr("disabled", bool) takes a boolean, so you can keep this pretty short using the this.checked DOM property of the checkbox.
2 Comments
Andy E
+1 for the negating the boolean, it's a simple technique that isn't used enough, IMO. Oh, and not using .is(":checked"), too ;-)
Eirik
As of jQuery 1.6 it's recommended to use the .prop() method for this instead (api.jquery.com/attr).
$("#yourcheckboxid").click(function() {
var checked_status = this.checked;
if (checked_status == true) {
$("#yourbuttonid").removeAttr("disabled");
} else {
$("#yourbuttonid").attr("disabled", "disabled");
}
});
Comments
If you are also using Bootstrap with Jquery, "disabled" is not an attribute but a class. So, (and I usually keep my functions on a separate loadable file to keep it clean) do this:
Create whatever.js
Put this code in it:
function seethemagic(){ $('#btn-send').toggleClass('disabled'); }
Load whatever.js into your html
The button can look like this:
<button id="btn-send" class="btn btn-primary d-grid w-100 disabled"onclick="seethemagic();">Show me the magic</button>
This way the button will toggle on and off.
