How to disable the rest of the available checkboxes if some are selected

disable checkbox javascript
disable checkbox jquery
javascript disable checkbox when another checkbox is checked
how to disable checkbox based on condition in javascript
if checkbox is checked value=1; else 0 javascript
disable checkbox html
how to get all checked checkbox value in javascript
disable text field if checkbox checked

I was wondering through the internet and I found this type of checkboxes with images. (https://codepen.io/kskhr/pen/pRwKjg) I need to disable the rest of the checkboxes when 3 are selected.

JS

// image gallery
// init the state from the input
$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  }
  else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input
$(".image-checkbox").on("click", function (e) {
  $(this).toggleClass('image-checkbox-checked');
  var $checkbox = $(this).find('input[type="checkbox"]');
  $checkbox.prop("checked",!$checkbox.prop("checked"))

  e.preventDefault();
});

I think the best way can be solved with javascript, but i'm a little bit confused.

Thank you!

Just some simple logic to check how many currently have the class, and also if the currently clicked element has the class, if not it should be disabled:

if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) 
    return;

If you add that to the onclick event it should act accordingly.

Here is a forked codepen: https://codepen.io/anon/pen/Rvyqyq

Codepen doesn't like that for some reason here is a snippet if it doesn't load:

// image gallery
// init the state from the input
$(".image-checkbox").each(function() {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  } else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input
$(".image-checkbox").on("click", function(e) {

  if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) return;

  $(this).toggleClass('image-checkbox-checked');
  var $checkbox = $(this).find('input[type="checkbox"]');
  $checkbox.prop("checked", !$checkbox.prop("checked"))

  e.preventDefault();
});
.nopad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/*image gallery*/

.image-checkbox {
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 4px solid transparent;
  margin-bottom: 0;
  outline: 0;
}

.image-checkbox input[type="checkbox"] {
  display: none;
}

.image-checkbox-checked {
  border-color: #4783B0;
}

.image-checkbox .fa {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}

.image-checkbox-checked .fa {
  display: block !important;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- 
Image Checkbox Bootstrap template for multiple image selection
https://www.prepbootstrap.com/bootstrap-template/image-checkbox
-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
  <h3>Bootstrap image checkbox(multiple)</h3>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>

</div>

HTML DOM Input Checkbox disabled Property, // image gallery // init the state from the input $(".image-checkbox").each(function () { if ($(this).find('input[type="checkbox"]').first().attr("checked")) {� Just some simple logic to check how many currently have the class, and also if the currently clicked element has the class, if not it should be disabled: if ($('.image-checkbox-checked').length === 3 && !$(this).hasClass('image-checkbox-checked')) return; If you add that to the onclick event it should act accordingly.

Create a counter to keep track of how many checkboxes are checked:

//html
<input type="checkbox" class="checkbox">1
<input type="checkbox" class="checkbox">2
<input type="checkbox" class="checkbox">3                            

-

let numberOfCheckboxesChecked = 0;

$('.checkbox').on("change", (e) => {
  if (e.target.checked) {
     numberOfCheckboxesChecked +=1 ;
  } else {
      numberOfCheckboxesChecked -=1;
  }

  if (numberOfCheckboxesChecked > 3) {
    e.target.checked = false;
   // or some other code to disable the remaining inputs
  }
});

Using The HTML Checkbox & Managing The Check State With , The checkbox is not disabled. Technical Details. Return Value: A Boolean, returns true if the checkbox is disabled� Open Control Panel and select Folder Options. 2. When the Folder Options window opens, choose the View tab and scroll down and uncheck “Use check boxes to select items” and click OK.

let count = 0;
$(".checkbox").on("click", function() {
  if ($(this).is(":checked")) {
    $(this).removeClass("undone").addClass("done")
    count++;
  } else {
   $(this).removeClass("done").addClass("undone")
    count--
  }
  if (count == "3") {
    $(".checkbox").each(function() {
      if ($(".checkbox").hasClass("undone")) {
        $(".undone").attr("disabled", "disabled")
      }
    });
  }
  else{
   $(".checkbox").attr("disabled", false)
   
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
  <input class="checkbox undone" type="checkbox" value="Option1">Option 1</label>
</div>
<div>
  <label>
  <input class="checkbox  undone" type="checkbox" value="Option2">Option 2</label>
</div>
<div>
  <label><input class="checkbox  undone" type="checkbox" value="Option3" >Option 3</label>
</div>
<div>
  <label>
  <input class="checkbox undone" type="checkbox" value="Option4">Option 4</label>
</div>
<div>
  <label>
  <input class="checkbox undone" type="checkbox" value="Option5">Option 5</label>
</div>
<div>
  <label>
  <input class="checkbox  undone" type="checkbox" value="Option6" >Option 6</label>
</div>

Solved: How can I disable specific choices in a checkbox i, Managing checkboxes in HTML, specifically using JavaScript and jQuery can metaphor, but are used when there is a single choice available within a list. Checkboxes are used for instances where a user may wish to select multiple I generally intercept any form submission and perform validation and� I also have three Checkbox controls, which are disabled. Also Read: How to Enable or Disable Multiple Checkboxes Based on Dropdown Selection in AngularJS. What I want is when a user selects a value from the dropdown list, based on a certain condition the script (using JavaScript and jQuery) will enable or disable the checkboxes.

Enable/Disable Checkboxes on Dropdown selection in AngularJS , If choice c1 is checked I want all the other choices to be unchecked and disabled (greyed out or removed, either way works). Is this possible to do� If there is no common attribute, use a common class name of a generic selector like $('[type="checkbox"]') $(':checked').length with :checked pseudo lets you find only checked inputs..prop('disabled',true); is used to disable the inputs - Refer .prop().

JavaScript Checkbox, In the previous example above, I have written a function in my controller that checks if a certain condition is met before updating the checkboxes. However here,� When the user selects two options, we disable the rest. If the user un-checks one of the selected options, all checkboxes are enabled. The approach turned out to be intuitive even for inexperienced users. Since this approach relies on JavaScript, there needs to be additional validation on submit.

Using JavaScript to Select/Deselect/Disable Radio Buttons, Summary: in this tutorial, you will learn how to use JavaScript to check if a checkbox is checked, to get values of selected checkboxes, and select / unselect all� You should use "attr" here, and be careful that to disable the "disabled state", you will need to remove the attribute, not simply set it to false (using removeAttr)

Comments
  • but you only have 5 checkboxes in your example? So what are the "rest" of the checkboxes?
  • In this example could be with 3, so 2 would be disabled
  • still I did not get your question.
  • I should be able to click up to 3 checkboxes or, in this case, just 3 images.
  • np @FelipeFullerArangua good job on reading through how to write a good question, you formatted your code and everything!
  • @FelipeFullerArangua please, if it solved your issue, accept the answer for other people looking for similar solution :)