Enable button when checkboxes selected

Question

I have multiple checkboxes and a submit button that is initially disabled. When checking a box the button is enabled and when unchecking, the button is disabled again.

If have multiple checkboxes selected but uncheck one, the button becomes disabled even though I have selected other checkboxes. How can I fix this issue?

<script type="text/javascript"> 
$(function() {
    $(".checkbox").click(function() {
      $(".delete").attr("disabled", !this.checked);
    });
});
</script>

HTML

<input type="checkbox" name="msg[]" value="32" class="checkbox" />
<input type="checkbox" name="msg[]" value="44" class="checkbox" />
<input type="checkbox" name="msg[]" value="26" class="checkbox" />

<button type="submit" class="delete" disabled="disabled">Delete</button>

SeanCannon · Accepted Answer · 2011-09-02 19:00:51Z

7

$(function() {
    $(".checkbox").click(function(){
        $('.delete').prop('disabled',$('input.checkbox:checked').length == 0);
    });
});

Demo: http://jsfiddle.net/AlienWebguy/3U364/

edited Sep 2, 2011 at 19:00

answered Sep 2, 2011 at 18:53

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Igor Zinov'yev Over a year ago

Perhaps you meant input.checkbox?

Cloudy · Accepted Answer · 2011-09-02 18:55:09Z

3

Implement a counter to track how many are checked, rather than just disabling the button. Add 1 every time a box is checked, and subtract 1 every time a box is unchecked. Once the counter hits 0, disable the button. When it changes to 1, enable the button (if it changes to any higher number it will have already been enabled, so you don't need to enable it every time). Sample:

<script type="text/javascript">
var boxcounter;
$(function() {
    boxcounter = 0;
    $(".checkbox").click(function() {
        if(this.checked) {
            counter++;
            if(counter == 1){
                $(".delete").attr("disabled", "");
            }
        } else {
            counter--;
            if(counter == 0){
                $(".delete").attr("disabled", "disabled");
            }
        }
    }
}
</script>

answered Sep 2, 2011 at 18:55

Cloudy

7,5297 gold badges64 silver badges98 bronze badges

1 Comment

CyberJunkie Over a year ago

Thanks that's intuitive but I try to use the most compact solutions.

ShankarSangoli · Accepted Answer · 2011-09-02 19:10:03Z

3

Try this where I am basically checking if all the checkboxes are not checked then disable the button.

$(function() {
    $(".checkbox").click(function() {
      $(".delete").attr("disabled", !$(".checkbox:checked").length);
    });
});

edited Sep 2, 2011 at 19:10

answered Sep 2, 2011 at 18:52

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

6 Comments

Igor Zinov'yev Over a year ago

This is very elegant, although I think it acts not the way the OP wants. Maybe it should be more like disabled = !$('.checkbox:checked').size()? This way the submit will only be enabled when there is at least one checkbox checked.

ShankarSangoli Over a year ago

Oh, I thgt the other way. Well I modified my answer thankx though.

ShankarSangoli Over a year ago

I modified my answer can you guys please remove the down vote?

ShankarSangoli Over a year ago

@CyberJunkie - Take a look at this answer its very simple.

ShankarSangoli Over a year ago

@CyberJunkie - Can you accept this answer if you are satisfied?

|

Chris Pietschmann · Accepted Answer · 2011-09-02 18:51:48Z

0

You need to check the state of the other boxes each time 1 box is toggled.

answered Sep 2, 2011 at 18:51

Chris Pietschmann

29.9k36 gold badges124 silver badges167 bronze badges

Comments

James · Accepted Answer · 2011-09-02 18:52:44Z

0

You can build an array of every checkbox. Then, loop through testing for checked, and exit the loop on checked (this is what you care about). If you reach the end of the loop and checked for all was false, then disable the button.

This will prevent one uncheck from disabling the button.

You're currently only checking "this" checkbox rather than all.

answered Sep 2, 2011 at 18:52

James

5392 silver badges6 bronze badges

Comments

rameezmeans · Accepted Answer · 2022-09-26 12:23:53Z

0

This code is Actually works without any error.

var boxcounter;
$(function() {
    let boxcounter = 0;
    $(".cgv-checkbox").click(function() {
        if(this.checked) {
            console.log('checked');
            boxcounter++;
            if(boxcounter == 3){
                $("#register_form_Register").removeAttr("disabled");
            }
        } else {
            boxcounter--;
            if(boxcounter < 3){
                $("#register_form_Register").attr("disabled", "disabled");
            }
        }
    });
});

This will work with multiple checkboxes as well.

answered Sep 26, 2022 at 12:23

rameezmeans

8501 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Enable button when checkboxes selected

6 Answers 6

1 Comment

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related