CODEWITHSUNDEEP
javascriptjqueryhtml
Finezxc
Finezxc

Reputation: 55

Button disable when no checkboxes are selected in jquery

I have trouble with disabled button when I select checkboxes. Multicheck is working, but if I have two or more items, I select all and then deselect one of them and the button disables again. Please help me.

Here is my code:

<input type='submit' id='delete-button' class="delete-button" disabled="disabled">

<input type="checkbox" id="check-all"name="deleteall" value="checkbox-all">

<input type='checkbox' class='checkSingle' id='checkbox' name='check_list[]'>
<input type='checkbox' class='checkSingle' id='checkbox' name='check_list[]'>
<input type='checkbox' class='checkSingle' id='checkbox' name='check_list[]'>
<input type='checkbox' class='checkSingle' id='checkbox' name='check_list[]'>
<input type='checkbox' class='checkSingle' id='checkbox' name='check_list[]'>

and jQuery code:

(function ( $ ) {
    $( 'document' ).ready( function() {
        $('.checkSingle').on ("click", function() {
            if ($(this).is(':checked')) {
                $("#delete-button").removeAttr('disabled');
            } else {
                $('#delete-button').attr('disabled', 'disabled');
            }
        });
        $('#check-all').change(function () {
            if (this.checked){
                $("#delete-button").removeAttr('disabled');
                $(".checkSingle").each(function() {
                    this.checked=true;
                })
            } else {
                $(".checkSingle").each(function() {
                    $('#delete-button').attr('disabled', 'disabled');
                    this.checked=false;
                })
            }
        });
        $(".checkSingle").click(function () {
            if ($(this).is(":checked")) {
                var isAllChecked = 0;
                $(".checkSingle").each(function() {
                    if(!this.checked)
                        isAllChecked = 1;
                })
                if(isAllChecked == 0) {
                    $("#check-all").prop("checked", true);
                }
            } else {
                $("#check-all").prop("checked", false);
            }
        });
    });
})( jQuery );

Upvotes: 0

Views: 85

Answers (1)

cli-ish
cli-ish

Reputation: 776

This should do the trick, if you run over all elements you need to check if one is checked if not then you need to set the button to active if not then disable it.

(function ( $ ) {
$( 'document' ).ready( function() {
    $('#check-all').change(function () {
        if (this.checked){
            $("#delete-button").removeAttr('disabled');
            $(".checkSingle").each(function() {
                this.checked=true;
            })
        } else {
            $(".checkSingle").each(function() {
                $('#delete-button').attr('disabled', 'disabled');
                this.checked=false;
            })
        }
    });
    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;
            $(".checkSingle").each(function() {
                if(!this.checked)
                    isAllChecked = 1;
            })
            if(isAllChecked == 0) {
                $("#check-all").prop("checked", true);
            }
        } else {
            $("#check-all").prop("checked", false);
        }
        var checked = false;
        $(".checkSingle").each(function() {
            if(this.checked){
                checked = true;
            }
        });

        if(checked){
            $("#delete-button").removeAttr('disabled');
        } else {
            $('#delete-button').attr('disabled', 'disabled');
        }
    });
});
})( jQuery );

Upvotes: 1

Related Questions