How to disable unselected checkboxes when a limit is reached

Question

I would like to know how to disable unselected checkboxes using jQuery. The goal is to disable the unselected checkboxes if the number of selected checkboxes is greater than or equal to 3.

 $('.myCheckBox').change(function() {
   var checkBoxLenghtStandard = $('[name="addon-2811-workshop-normal-    1[]"]:checked').filter(':checked').length;

   if (checkBoxLenghtStandard >= 3) {
     //Here I would like to disable unselected checkboxes
   }
 });

Possible duplicate of [jQuery - checkbox enable/disable](https://stackoverflow.com/questions/2330209/jquery-checkbox-enable-disable) — mrdeadsven, Mar 20 '19 at 11:02
I am using a plugin of Wordpress...the related elements are written above. — user10087184, Mar 20 '19 at 11:02

score 3 · Accepted Answer · answered Mar 20 '19 at 11:03

To make this work you can use the :not(:checked) selector to filter the available unchecked boxes, the prop() to disabled them.

Note that you will also need an else condition to enable the checkboxes again when one is deselected.

var $checkboxes = $('.myCheckBox').change(function() {
  var $checked = $checkboxes.filter(':checked'); 
  if ($checked.length >= 3) {
    $checkboxes.filter(':not(:checked)').prop('disabled', true);
  } else {
    $checkboxes.prop('disabled', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />

Александр Чертков · Answer 2 · 2019-03-20T11:11:16.077

3

Try - we set disable flag to unchecked inputs

$('input').click(function() {
  checkboxesValidate();
})

function checkboxesValidate() {
 $('input:not(:checked)').attr("disabled", $('input:checked').length === 3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'>

edited Mar 20 '19 at 11:11

answered Mar 20 '19 at 11:06

Александр Чертков

129
7

Please take the time to describe what the issues are and why this solution helps. Remember, we're here to educate people, not just dump code on them. – Rory McCrossan Mar 20 '19 at 11:06
1

You should re-enable the checkboxes when one is deselected. – Sanguinary Mar 20 '19 at 11:08
@Sanguinary fixed – Александр Чертков Mar 20 '19 at 11:09
Elegant solution. – Sanguinary Mar 20 '19 at 11:12

Nick Parsons · Answer 3 · 2019-03-20T11:20:58.440

You could use:

$(".myCheckBox:not(:checked)").prop('disabled', true);

To disable all checkboxes which are not checked.

You can then reenable your checkboxes (in an else) once fewer than 3 checkboxes have been selected

See example below:

$('.myCheckBox').on('input', function() {
  var checkBoxLenghtStandard = $('.myCheckBox:checked').length;
  if (checkBoxLenghtStandard >= 3) {
    $(".myCheckBox:not(:checked)").prop('disabled', true);
  } else {
    $('.myCheckBox[disabled]').prop('disabled', false)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="myCheckBox" type="checkbox" name="addon-2811-workshop-normal-1[]" />

<input class="myCheckBox" type="checkbox" name="addon-2811-workshop-normal-1[]" />

<input class="myCheckBox" type="checkbox" name="addon-2811-workshop-normal-1[]" />

<input class="myCheckBox" type="checkbox" name="addon-2811-workshop-normal-1[]" />

<input class="myCheckBox" type="checkbox" name="addon-2811-workshop-normal-1[]" />

How to disable unselected checkboxes when a limit is reached

3 Answers3