How can I disable a button until a checkbox is checked?

Question

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/

Answer 1

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.

Here's a full working example including the above amendments:

$('#check').change(function() {
  $('#btncheck').prop("disabled", !this.checked);
});

.form input[type="checkbox"] label {
  background: #000;
  height: 30px;
  border: none;
}

.form .button {
  cursor: pointer;
  display: block;
  background: rgba(46, 204, 113, 1.0);
  width: 180px;
  margin: 0 auto;
  margin-bottom: 40px;
  padding: 16px 0;
  border: none;
  border-radius: 100px;
  color: #fff;
  font-family: 'Open Sans';
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  transition: 0.2s linear;
}

.form .button[disabled] {
  background-color: rgba(128, 128, 128);
  pointer-events: none;
}

.form .button:hover {
  background: rgba(46, 204, 113, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
  <form>
    <div class="field">
      <label for="username">Name</label>
      <input id="username" name="username" type="text" value="Vorname Nachname">
    </div>
    <div class="field">
      <label for="email">E-Mail Adresse</label>
      <input id="email" name="email" type="email" value="ihre@email.com">
    </div>
    <div class="field">
      <label for="password">Handicap</label>
      <input id="password" name="password" type="text" value="z.B. 3">
    </div>
    <div class="field">
      <label for="rpassword">Gäste</label>
      <input id="rpassword" name="rpassword" type="text" value="z.B. 2">
    </div>
    <div class="checkbox">
      <input id="check" name="checkbox" type="checkbox">
      <label for="checkbox">Ich bin einverstanden dass mich die Leute kontaktieren</label>
    </div>
    <input type="submit" name="anmelden" class="button" id="btncheck" value="Anmelden" disabled />
  </form>
</div>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

You have incorrect condition in if statement.use:

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

Demo