Change disabled/enabled when checkbox is checked/unchecked

Question

I want to combine these two jquery things: Disable/enable an input with jQuery? and JQuery check if checkbox is NOT checked

HTML:

<label>
    <input type="checkbox" name="agreement"> I read all the information in the red box above and followed the instructions!
</label>
<br/>
<input disabled="disabled" type="submit" name="submit">

jQuery:

$( document ).ready(function() {
    if($("input[name=agreement]").prop('checked') == true){
        $("input[name=submit]").prop('disabled', false);
    } else {
        $("input[name=submit]").prop('disabled', true);
    }
}

Demo: http://jsfiddle.net/Zoker/32w5kcf8/

But it does not work. Can anybody tell me why?

Just a side-note: id is better than name for identifying elements in the DOM. — ytg, Mar 09 '15 at 13:05

Arun P Johny · Answer 1 · 2015-03-09T13:08:41.817

1

You need to use a change handler

$( document ).ready(function() {
    $("input[name=agreement]").change(function(){
        $("input[name=submit]").prop('disabled', !this.checked);
    })
})

Demo: Fiddle

edited Mar 09 '15 at 13:08

answered Mar 09 '15 at 13:01

Arun P Johny

365,836
60
503
504

Works, but why can't I use it the way I made it? – Zoker Mar 09 '15 at 13:06
1

@Zoker you have the code in dom ready which will be executed only once on doc ready... you want the method to be called when ever the checked state is changed – Arun P Johny Mar 09 '15 at 13:09
Is it also possible to toggle the value? So if "unchecked" -> value="this button is unchecked" if "checked"->"submit" – Zoker Mar 09 '15 at 19:04

score 1 · Accepted Answer · answered Mar 09 '15 at 13:33

there is a simple solution first of all you need to use jQuery library in jsfiddle to use jQuery's instructions :)

first of all check html cause I've added class and id attributes to inputs :) here is a solution of your problem with jQuery

$(".agreement").on('click', function() {
   if($(this).is(':checked')){
        $(".send").prop('disabled',false);
    } else {
        $(".send").prop('disabled',true);
    }
})

jQuery example

and here is in pure javaScript

function checkboxed() {
    var agreement,send;
    agreement= document.getElementById('agreement');
    send = document.getElementById('send');
    if(agreement.checked == true) {
        send.disabled = false;        
    } else {
        send.disabled = true;   
    }
}

javascript example

Change disabled/enabled when checkbox is checked/unchecked

2 Answers2