CODEWITHSUNDEEP
javascriptjqueryhtmlonclick
Traffy
Traffy

Reputation: 2861

jQuery - Enable/Disable a button following checkboxes state

I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :

The jQuery sample

And this is the part I'd like to improve :

$(document).ready(function() {
    the_terms = $("#the-terms");
    the_terms2 = $("#the-terms2");

    the_terms.click(function() {
        if ($(this).is(":checked")){
            $("#submitBtn").removeAttr("disabled");
        } else {
            $("#submitBtn").attr("disabled", "disabled");
        }
    });
});

And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".

Any idea guys?

Upvotes: 1

Views: 226

Answers (5)

MCurbelo
MCurbelo

Reputation: 4143

$(document).ready(function() {
   the_terms = $("#the-terms");
   the_terms2 = $("#the-terms2");

   $('.checkbox').change(function(){
       $("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
    });
});

Upvotes: 1

Sidhdharajsinh Sodha
Sidhdharajsinh Sodha

Reputation: 163

Try below modified script , please check if it works as you want.

$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");

 if(the_terms.is(":checked") || the_terms2.is(":checked"))
 {
   $("#submitBtn").removeAttr("disabled");
 }
else
{
    $("#submitBtn").attr("disabled", "disabled");
}

the_terms.click(function() {
    if ($(this).is(":checked") || the_terms2.is(":checked")){
        $("#submitBtn").removeAttr("disabled");
    } else {
        $("#submitBtn").attr("disabled", "disabled");
    }
});

 the_terms2.click(function() {
    if ($(this).is(":checked") || the_terms.is(":checked") ){
        $("#submitBtn").removeAttr("disabled");
    } else {
        $("#submitBtn").attr("disabled", "disabled");
    }
});

});

Upvotes: 0

Pierre Granger
Pierre Granger

Reputation: 2012

// Make a function to be called on onload or on click
function checkTerm() {
    jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}

// Call the function on load
$(document).ready(checkTerm) ;

// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;

Upvotes: 0

MrCode
MrCode

Reputation: 64526

It can be done with:

Fiddle

$('.checkbox').change(function(){
    $('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});

Note:

  • This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
  • Use the change event not click.

Upvotes: 3

Satpal
Satpal

Reputation: 133403

Simply use

$(".checkbox").click(function() {        
    $("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});

DEMO

Upvotes: 1

Related Questions