I would like to have a form button disabled, until a user clicks a checkbox.
This is the code i have (last part of the form)
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="checkbox">
Some Text Here
</label>
</div>
<input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />
I tried the following
$('#check').click(function(){
if($(this).attr('checked') == false){
$('#btncheck').attr("disabled","disabled");
}
else
$('#btncheck').removeAttr('disabled');
});
But this is not working and I am not sure why. I don't know how I can disable the button (should be disabled also visually).
Solution (thanks to Rory McCrossan ): http://jsfiddle.net/0hvtgveh/
Your logic is a little off, try this:
$('#check').change(function () {
$('#btncheck').prop("disabled", !this.checked);
}).change()
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.
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" />
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()
$('#btncheck').attr("disabled",true); //Initially disabled button when document loaded.
$('#check').click(function(){
$('#btncheck').attr("disabled",!$(this).is(":checked"));
})
When you click on checkbox
.is(":checked")
return true if it is checked other wise return false. According to selection of your checkbox button it will enable/disable button.
You have incorrect condition in if statement.use:
$('#check').click(function(){
if(!$(this).is(':checked')){
$('#btncheck').attr("disabled","disabled");
}else
$('#btncheck').removeAttr('disabled');
});
use if($(this ).prop( "checked" ))
, instead of if($(this).attr('checked') == false)
http://jsfiddle.net/0hvtgveh/4/
$('#check').click(function(){
if($(this ).prop( "checked" )){
$('#btncheck').attr("disabled","disabled");
}
else
$('#btncheck').removeAttr('disabled');
});
That is going to need a bit of logic :
$(function(){
const button = $('#submit'); // The submit input id
button.attr('disabled', 'disabled');
$('#checkbox').change(function() { // The checkbox id
if (this.checked){
button.removeAttr('disabled')
.css("cursor", "pointer");
} else {
button.attr('disabled', 'disabled')
.css( "cursor", "not-allowed" );
}
});
});
Remember to set your css Submit Button attribute to
cursor: not-allowed;
hence can disable it upon page load.
PS : This code goes to the bottom of the page. If it turns out that you have a separate file for it, do not forget to wrap it around:
$(document).ready(function() { // code goes here });
I believe another way to handle this problem is by using document.getElementById:
if($(this).prop("checked")) {
document.getElementById('#btncheck').disabled = false;
} else {
document.getElementById('#btncheck').disabled = true;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.