How can I disable a button until a checkbox is checked?
Try with on change handler:
$(function() {
var chk = $('#check');
var btn = $('#btncheck');
chk.on('change', function() {
btn.prop("disabled", !this.checked);//true: disabled, false: enabled
}).trigger('change'); //page load trigger event
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="check">Some Text Here</label><!-- for must be the id of input -->
</div>
<input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />
Your logic is a little off, try this:
$('#check').change(function () {
$('#btncheck').prop("disabled", !this.checked);
}).change()
Updated fiddle
Note that the UI of the button does not update when disabled, however the disabled
property does change. You would probably want to add some CSS styling to make it obvious that the button is disabled.
Also, I changed the code to use the change
event instead of click
to better cater for people who navigate using the keyboard.
You need to update property, so use .prop()
instead of .attr()
$('#check').click(function() {
$('#btncheck').prop("disabled", this.checked == false);
});
A Good read .prop() vs .attr()