Disable or enable Submit button on Checkbox checked event

Question

I want something like this but with a slight change. I want a Button to be enabled or disabled on Checkbox checked event, i.e. when checkbox is checked then and then only button should be enabled otherwise it is disabled. This should be done using jQuery Code not JavaScript.

As this is MVC form so there is no Form ID.

Ablative

Answer 1

$(function() {
    $('#id_of_your_checkbox').click(function() {
        if ($(this).is(':checked')) {
            $('#id_of_your_button').attr('disabled', 'disabled');
        } else {
            $('#id_of_your_button').removeAttr('disabled');
        }
    });
});

And here's a live demo.

Alexi

Wouldn't this.checked suffice? – Desirable

@Raynos, sure it would suffice. – Alexi

better phrased, are there any old browser bugs with this.checked that $(this).is(':checked') deals with for me? Or does is checked just read better. – Desirable

@Raynos, it's exactly because I don't know the answer to your question that I prefer to immunize myself by using the jQuery version and ensure that it will work in all browsers supported by jQuery. – Alexi

As of jQuery 1.6 and beyond, .prop() should be used instead of .attr(), see the doc here api.jquery.com/prop. Also .removeProp() method should not be used to set these properties to false. So here is an updated live demo jsfiddle.net/rqvwkc0j/3 – Jujube

Answer 2

This is old but worked for me with jquery 1.11

<script>
$(function() {
    $('#checkbox-id').click(function() {
        if ($(this).is(':checked')) {
            $('#button-id').removeAttr('disabled');
        } else {
            $('#button-id').attr('disabled', 'disabled');
        }
    });
});
</script>

the if instruction swapped with the else instruction and in the button html markup add disabled="disabled"

may help someone

Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Retroversion

Answer 3

$('#checkbox').click(function(){
    if($(this).is(':checked')){
        $('#submitButton').attr("disabled", "true");
    }else {
        $('#submitButton').removeAttr("disabled");
    }

});

... it works for me ...

Franconian

-1 for setting the attribute to true everytime the box is checked. – Desirable

$(this).attr('checked', true) sets the attribute to true. What you want to do is check if it has the attribute or if it's value is something sensible $(this).attr('checked') === something_sensible – Desirable

This is not the correct answer atleast it doesnt go right with my requirements .. I want Submit button to be enabled only if Checkbox is checked otherwise it should be disabled always .. Above code does it in other way . When I check the checkbox then my button gets disabled and when i uncheck it button gets enabled .. Tried both codes .. in the first case above condition happens and in the second case Checkbox remains checked all the time . ( I tried to add Disabled=Disabled in Button HTML code but didnt work then i removed it but still nothing happened – Ablative

w3schools.com/TAGS/att_button_disabled.asp visit this link it shuold be helpfull for you – Franconian

w3schools.com/TAGS/tryit.asp?filename=tryhtml_button_disabled running example is here – Franconian

Answer 4

Seriously? Why not just:

onclick="$('#submitButton').attr('disabled',$('#checkbox').is(':checked'));"

Skep

Answer 5

I know, I am a bit late to the party, but here's my working solution for my WP comment form:

// disable comment form until gdpr is checked
 if($('#id_of_gdpr_checkbox').length > 0 && $('#submit').length > 0){
     if(!$('#id_of_gdpr_checkbox').is(':checked')) {
        $('#submit').attr('disabled', 'disabled');
     }
     $('#id_of_gdpr_checkbox').click(function() {
        if ($(this).is(':checked')) {
            $('#submit').removeAttr('disabled');
        } else {
            $('#submit').attr('disabled', 'disabled');
        }
    });
 }

Giraudoux