Toggle enable/disable input button if one or more checkboxes are checked

Question

I have a small piece of code that I want to use as a condition for a jQuery dialog. Pretty simple case, if checkboxes are checked, enable button, if not, disable it. The below code disables the button just fine, but does not enable it when checking any checkboxes.

I tried multiple variations and I cannot get this to work in my code (several work fine in Fiddle). Many thanks for your help.

JS snippet

if (button.text() == "Apply") {
    if ($("selectLocation").is(':checked'))
        button.enabled(true); // checked
    else
        button.enabled(false);  // unchecked
}

HTML

<input type="checkbox" name="selectLocation" />

score 2 · Accepted Answer · answered Jul 15 '13 at 14:39

You will have to use Jquery's .prop() to solve this one

if (button.text() == "Apply"){
    if ($("selectLocation").is(':checked')){
        button.prop('disabled', false);
    }
    else{
        button.prop('disabled', true);
    }
}

I have never been able to get .attr() to work for this situation

score 0 · Answer 2 · answered Jul 15 '13 at 14:38

0

Try like this:

$("input[name=selectLocation]")

It's not working because you are selecting element with tag selectLocation not element with name selectLocation

answered Jul 15 '13 at 14:38

karaxuna

26,752
13
82
117

score 0 · Answer 3 · answered Jul 15 '13 at 14:38

if button is a jquery element:

button.attr("disabled", "disabled"); //to disable it
button.removeAttr("disabled"); //to reenable it

In your code, it should be:

if (button.text() == "Apply") {
    if ($("selectLocation").is(':checked'))
        button.removeAttr("disabled"); //to reenable it
    else
        button.attr("disabled", "disabled");
}

The selector $("input[name=selectLocation]") should work

score 0 · Answer 4 · answered Jul 15 '13 at 14:38

Not sure if jQuery is going to select the name like that, add in an ID and change the selector.

if (button.text() == "Apply") {
    if ($("#selectLocation").is(':checked'))
        button.removeAttr("disabled");
    else
        button.attr("disabled", "disabled");
}

<input id="selectLocation" type="checkbox" name="selectLocation" />

Toggle enable/disable input button if one or more checkboxes are checked

4 Answers4