vendredi 4 décembre 2015

Disable / Enable button by checkbox using jQuery

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.

Aucun commentaire:

Enregistrer un commentaire