Disable / Enable button by checkbox using jQuery

Question

I want to disable my button if no checkbox is checked. At least one checkbox should be checked to enable the button.

My HTML:

<table border="1">
    <tr>
        <th></th>
        <th>Name</th>
    </tr>
    @foreach($clients as $client)
    <tr>
        <td><input type="checkbox" name="status[]" value="$client['id']" class="checkbox"></td>
        <td>{{ $client['name'] }}</td>
    </tr>
    @endforeach    
</table>

<button type="button" id="off" class="btn btn-default" data-toggle="modal" data-target="#offer" disabled>Choose New Offer</button>

I tried this jQuery code:

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

The button is disabled by default. When checked one checkbox it's enabled, when unchecked it's disabled again. But the problem is when I checked multiple checkbox and uncheck one checkbox it's disable again, though many checkbox is still checked.

iCollect.it Ltd · Accepted Answer · 2015-12-04 14:10:23Z

5

You need to see if any checkbox is check to make the decision on the disabled state.

Your should also use prop and not attr to ensure cross-browser compatibility.

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

JSFiddle: http://jsfiddle.net/TrueBlueAussie/L72Lv6h1/

prop for disabled can take a boolean flag value, so no need for the if else.

edited Dec 4, 2015 at 14:10

answered Dec 4, 2015 at 14:06

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

5 Comments

spaniol6 Over a year ago

$('#off').prop('disabled', $('.checkbox:checked').length > 0); needs to be $('#off').prop('disabled', $('.checkbox:checked').length === 0); to fit the behavior smartrahat wants. I tried to make an edit but there's a character limit. Otherwise this is better than mine +1.

iCollect.it Ltd Over a year ago

@spaniol6: Yes, I noticed I had it reversed. Fixed with ! Thanks

smartrahat Over a year ago

Both answer is working for me. Which should I accept?

iCollect.it Ltd Over a year ago

Whichever one @spaniol6 liked the most :) - he was in first, but prop is a much safer choice than attr for disabled.

spaniol6 Over a year ago

@smartrahat this one is the better answer :)

spaniol6 · Accepted Answer · 2015-12-04 14:05:10Z

5

Instead of checking if the checkbox that was clicked is checked, you should check if any of the checkboxes are checked. You can do this by selecting all checked checkboxes with $('.checkbox:checked') and then checking the length of the returned jQuery object.

$(function() {
    $('.checkbox').click(function() {
        if ($('.checkbox:checked').length > 0) {
            $('#off').removeAttr('disabled');
        } else {
            $('#off').attr('disabled', 'disabled');
        }
    });
});

JSFiddle

answered Dec 4, 2015 at 14:05

spaniol6

6065 silver badges13 bronze badges

2 Comments

smartrahat Over a year ago

Woo Hoo! Thanks brother.

iCollect.it Ltd Over a year ago

And plus one for getting in first

Collectives™ on Stack Overflow

Disable / Enable button by checkbox using jQuery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related