Click Checkbox to disabled button

Question

I want to disabled the button to send the form until the checkbox is set and i want to solve it with a nice short jQuery Code. But there has to be a bug, nothing happens. Does anyone have an idea?

JS:

$(document).ready(function(){
$('#terms').keyup(function(){
    if($('#terms').is(':checked')){
          $('#btn').removeAttr('disabled');
    }else{
        $('#btn').attr('disabled');
}})}

HTML:

<input id="terms" type="checkbox" value="" name="terms">
    <input id="btn"   name="register" type="button" value="Register" disabled/>

possible duplicate of [How do i disable a submit button when checkbox is uncheck?](http://stackoverflow.com/questions/5458531/how-do-i-disable-a-submit-button-when-checkbox-is-uncheck) — Liam, Jul 29 '15 at 14:15
Use the [`prop`](http://api.jquery.com/prop/) method _correctly_ instead of the `attr`. http://stackoverflow.com/questions/5874652/prop-vs-attr — Ram, Jul 29 '15 at 14:21

score 3 · Accepted Answer · edited May 23 '17 at 12:06

Actually it's really simple:

$('#terms').on("change", function() {
  $("#btn").prop("disabled", !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="terms" type="checkbox" value="" name="terms">
<input id="btn"   name="register" type="button" value="Register" disabled/>

where the !this.checked is the boolean value of the current checkbox state.
Naturally there's a jQuery way: $(this).is(":not(:checked)") but there's no need to, since you should get used to understand the this environment and the DOM Properties you have available using simple vanilla JS read more.

Thank you very much! It works, you will get the "correct answer" soon. Need to wait a few minutes. — Fabrizio Cocco, Jul 29 '15 at 14:20

iCollect.it Ltd · Answer 2 · 2015-07-29T14:38:53.960

3

Use prop() instead of attr:

e.g.

$('#btn').prop('disabled', true);

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.

Note: You are using keyup instead of the change event for a checkbox.

Note your example can be simplified to just pass a boolean expression for on/off:

$(function(){
    $('#terms').change(function(){
        $('#btn').prop('disabled', !$(this).is(':checked'));
    });
});

edited Jul 29 '15 at 14:38

answered Jul 29 '15 at 14:18

iCollect.it Ltd

92,391
25
181
202

Your code is invalid. You're missing `);` and `$(this).is(':checked')` should be: `$(this).is(':not(:checked)')` or like `!$(this).is(':checked')` – Roko C. Buljan Jul 29 '15 at 14:31
1

@RokoC.Buljan Thanks. "Invalid" is a bit strong for as typo, but corrected :) – iCollect.it Ltd Jul 29 '15 at 14:33
strong, soft, call it as you like ;) the above will still hit hard since you're not closing properly your braces on the change function :) > therefore, yes, it's broken – Roko C. Buljan Jul 29 '15 at 14:34
@RokoC.Buljan I do like leave some work for the OP (corrected) :) Be grateful you beat me by 10 seconds :) – iCollect.it Ltd Jul 29 '15 at 14:39

Click Checkbox to disabled button

2 Answers2