Reputation: 3325
..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 ?
Upvotes: 1
Views: 5019
Reputation: 40030
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>
Upvotes: 4
Reputation: 83358
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.
Upvotes: 3