12

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/

8 Answers 8

10

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.

2
  • Ah yes, thank you. Is it possible to have the button disabled on default (when I first visit the page) and then turn it on? Right now the button is enabled on default.
    – Paranoia
    Feb 10, 2015 at 10:08
  • 1
    You can set the disabled="true" property in your HTML manually, or you could fire the event immediately. I've updated my answer for you. Feb 10, 2015 at 10:10
7

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

2

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

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

Demo

2
  • Run in mozilla firefox also. You can check demo
    – Sadikhasan
    Feb 14, 2019 at 6:30
  • Yes, it runs good in all tried. What I was pointing out, yours only one here that would work for me in Chrome:)
    – Woody
    Feb 14, 2019 at 16:56
0

You have incorrect condition in if statement.use:

$('#check').click(function(){
 if(!$(this).is(':checked')){
    $('#btncheck').attr("disabled","disabled");   
 }else
    $('#btncheck').removeAttr('disabled');
 });

Demo

0

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');
});
0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.