CODEWITHSUNDEEP
javascriptjquerycheckbox
syim
syim

Reputation: 39

to add a class when all checkboxes are checked

I'm trying to add a "disabled" class to my button when all the checkboxes are checked and when none of them are checked.

Was able to figure out when none of them are check: 

var SummaryCheckBox = function() {
    $(':checkbox').click(function () {
        $('.btn-primary').toggleClass('disabled', !$(':checkbox:checked').length);
    });
}

But having a hard time checking when all the checkboxes are checked. Suggestions?

Upvotes: 0

Views: 87

Answers (8)

Peter Seliger
Peter Seliger

Reputation: 13432

my two cents will be example code that features a larger code base but tries to be more generic and self-documenting too ...

(function (global, $) {

    var
        Array      = global.Array,

        array_from = (
            ((typeof Array.from == "function") && Array.from)
         || (function (array_prototype_slice) {
                return function (list) {
                    return array_prototype_slice.call(list);
                };
            }(Array.prototype.slice))
        ),

        isCheckboxControl = function (elm) {
            return !!(elm && (elm.type == "checkbox"));
        },
        isControlChecked = function (elm) {
            return !!(elm && elm.checked);
        },

        validateSubmitState = function (evt) {
            var
                elmForm = evt.currentTarget.form,
                $btnPrimary = $(elmForm).find(".btn-primary"),

                checkboxList = array_from(elmForm.elements)
                    .filter(isCheckboxControl),

                isEveryCheckboxChecked = checkboxList
                    .every(isControlChecked),

                isSomeCheckboxChecked = checkboxList
                    .some(isControlChecked)
            ;
            if (isEveryCheckboxChecked || !isSomeCheckboxChecked) {
                $btnPrimary.attr("disabled", "");
            } else {
                $btnPrimary.removeAttr("disabled");
            }
        },
        initializeSubmitBehavior = function () {
            var
                $btnPrimary = $(".btn-primary")
            ;
            $btnPrimary               // register validation.
                .closest("form")
                .on("click", ":checkbox", validateSubmitState)
            ;
            // force initial validation.
            $btnPrimary.toArray().forEach(function (elmButton) {
                var
                    elmCheckbox = $(elmButton.form).find(":checkbox")[0]
                ;
                if (elmCheckbox) {    // initial validation by fake event.
                    validateSubmitState({currentTarget:elmCheckbox});
                }
                // just trying not to break this examples form.
                elmButton.form.action = global.location.href;
            });
        }
    ;

    initializeSubmitBehavior();

}(window, jQuery));

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Try this code:

$(':checkbox').click(function () {
    $('.btn-primary').toggleClass('disabled',  !$(':checkbox:checked').length === $(":checkbox").length);
});

You need to check whether checked check boxes are same as total number of check boxes, Then you can add disabled class to the button.

Demo

Upvotes: 0

jstice4all
jstice4all

Reputation: 1948

  $('[type="checkbox"]').on('change', function(){    
    var l = $('[type="checkbox"]:checked').length;    
    if(l === 4 || l === 0){
         $('[type="submit"]').attr('disabled', '');
    } else {        
        $('[type="submit"]').removeAttr('disabled');
    }    
  });

Digit 4 (number of checkboxes) is hardcoded for simplicity.
Fiddle

Upvotes: 0

Samurai
Samurai

Reputation: 3729

function allChecked() {
    return $('input[type=checkbox]').not(':checked').length == 0;
}

You can check if it returns true or false, toggle the class you want.

jsfiddle DEMO

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20646

Add an additional condition to compare lengths,

$(':checkbox:checked').length === $(':checkbox').length
//         ^Checked length              ^Total Length

var SummaryCheckBox = function() {
    $(':checkbox').click(function () {
        $('.btn-primary').toggleClass('disabled', $(':checkbox:checked').length === $(':checkbox').length || !$(':checkbox:checked').length);
    });
}

Also, binding a click handler inside a function is not so good idea. Any specific reason for this? Move the .click(..) outside the function.

Fiddle

Fiddle2 with click handler outside the function

Upvotes: 0

Pedro Lobito
Pedro Lobito

Reputation: 99001

$(":checkbox").change(function(){
    var a = $(":checkbox");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }

      if(!a.length == a.filter(":checked").length){
        alert('all unchecked');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

Upvotes: 1

vinayakj
vinayakj

Reputation: 5681

var SummaryCheckBox = function() {
 $(':checkbox').click(function () {
    if($(':checkbox:checked').length == $(':checkbox').length || !$(':checkbox:checked').length){
       $('.btn-primary').toggleClass('disabled');
    }
 });
}

Also you might wanna add some class to checkboxes

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

This will remove class disabled if all checkboxes are checked or add it if only one checkbox not checked:

var SummaryCheckBox = function() {
    $(':checkbox').click(function () {
        $('.btn-primary').toggleClass('disabled', !($(':checkbox:checked').length === $(':checkbox').length));
    });
}

Upvotes: 0

Related Questions