Javascript/jQuery - remove checkbox value on click

Question

..I am counting the number of checked checkboxes and when the max number is reached I need to make sure no other checkbox is allowed to be selected.

like this....

IF(..some condition..)
{
  // do the deed
}
ELSE
{
  $('input[type="checkbox"]').on('click', function(event)
  {
    $(this).parent().removeClass("c1-item-selected");  // removing CSS
    $(this).parent().val="";  // hoping to remove value "checked"
  });
}

I tried to replace the $(this).parent().val=""; with: event.preventDefault(); event.stopPropagation(); but it was not the right choice of methods. It still allowed me to check any box and actually prevented me from unchecking it afterwards. So I thought I would simply set the value of any clicked checkbox to null or ("") and remove the styling so it all looks like no other checkbox is allowed to be selected but it did not seem to take :)

Any ideas how to prevent the checkbox to be checked when the ELSE statement is reached ?

Adam Rackis · Answer 1 · 2013-06-03T22:27:04.900

3

To disallow a checkbox from being checked, the proper way is to set the disabled property:

$('_select your cb').prop('disabled', true);

So if I'm understanding your code correctly, this:

$('input[type="checkbox"]').on('click', function(event) {
    $(this).parent().removeClass("c1-item-selected");  // removing CSS
    $(this).parent().val="";  // hoping to remove value "checked"
});

should simply be

$('input[type="checkbox"]').prop('disabled', true);

EDIT

Based on your comment, it looks like you want the checkboxes enabled, but with the user unable to check any other ones. Your best bet will be to maintain a simple boolean tracking whether the user can check anything else, and do something like:

var canCheckNew = false;

//gets set somehow

$('input[type="checkbox"]').on('click', function(event) {
    if (!canCheckNew && this.checked){
        this.checked = false;
    }
});

That said, that may make for an incredibly annoying UI for your users, whereby checkboxes appear to be enabled, but cannot be checked.

edited Jun 03 '13 at 22:27

answered Jun 03 '13 at 22:10

Adam Rackis

79,454
49
255
377

..yes, on the first look it seems correct but unfortunately this "freezes" all checkboxes and it does not allow visitor to modify any of their previous choices. Any other solution ? – Milan Jun 03 '13 at 22:22
I assume there are instructions that tell the user they can only select up to X choices. If so, then add a counter that changes with the number of boxes checked. Once they hit the limit, disable the rest until they uncheck a previously selected box. – Adrian J. Moreno Jun 03 '13 at 22:31
@iKnowKungFoo - indeed - that would be a great way to design it – Adam Rackis Jun 03 '13 at 22:31
@Milan .prop('disabled',true) may not be the best way to enable/disable checkboxes. See Kobi's explanation [on this page](http://stackoverflow.com/questions/1560546/disable-all-check-boxes), and my answer above. – cssyphus Jun 03 '13 at 22:58
...ok, to answer one after another. Yes, there is an alert message which informs visitor about "too many boxes checked" as well as it prevents them from proceeding anywhere. However, client requested that the moment final count of checkboxes is reached, all other checkboxes must be disabled and only those previously checked (selected by visitor) can be modified. Does it make sense? – Milan Jun 03 '13 at 23:16
...Adam, your last code edit does not work but it will most likely get me there, I'll vote you up if I can successfully modify it. – Milan Jun 03 '13 at 23:23
The revision of the comment below solved it! Thank you anyway! – Milan Jun 04 '13 at 00:07

score 3 · Accepted Answer · edited May 23 '17 at 12:05

2014 Update to what follows:

Note that (for jQuery versions > 1.6) prop() should be used instead of attr() -- see:

Disable/enable an input with jQuery?
.prop() vs .attr()

Therefore, in the below example:

                    if (checked > 2) {
                        $("input:checkbox:not(:checked)").prop('disabled',true);
                    }else{
                        $('input[type=checkbox]').prop('disabled',false);
                    }

UPDATED JSFIDDLE: jsFiddle

ORIGINAL ANSWER:

Is this what you had in mind? (Working example, just cut/paste and try it)

REVISION: working jsFiddle

This revised code will disable all unchecked checkboxes when 3 checkboxes are checked. If you uncheck one, then all unchecked checkboxes are re-enabled.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
            $(document).ready(function() {

                var checked = 0;

                $('input[type="checkbox"]').click(function() {
                    var $b = $('input[type=checkbox]');
                    checked = $b.filter(':checked').length;
                    //alert('There are [' + checked + '] checked checkboxes');

                    /***  SEE NOTES AT TOP: USE PROP() INSTEAD OF ATTR()  ***/                  
                    if (checked > 2) {
                        $("input:checkbox:not(:checked)").attr('disabled','disabled');
                    }else{
                        $('input[type=checkbox]').removeAttr('disabled');
                    }
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <h2>Allow up to three checkboxes to be checked, then disable all checkboxes on page</h2>
    <form action="">
        <input type="checkbox" name="vehicle" value="bike">I have a bike<br>
        <input type="checkbox" name="vehicle" value="car">I have a car<br>
        <input type="checkbox" name="vehicle" value="spoon">I have a spoon<br>
        <input type="checkbox" name="vehicle" value="guitar">I have a guitar<br>
        <input type="checkbox" name="vehicle" value="boat">I have a boat<br>
        <input type="checkbox" name="vehicle" value="house">I have a house<br>

    </form>


</body>
</html>

...thank you, nice thinking but I am not counting the number of clicks (checks), I need to count the state of available checkboxes. In otherwords, how many has been selected so far and if some gets unselected how many I have left. — Milan, Jun 03 '13 at 23:18
..great! the one you wrote in jsFiddle is exactly what I needed. — Milan, Jun 04 '13 at 00:07
@Milan Thank you. Please choose an accepted answer if this worked for you. — cssyphus, Jun 04 '13 at 15:21

Javascript/jQuery - remove checkbox value on click

2 Answers2