Sebastian Jeliazkov Sebastian Jeliazkov - 2 months ago 11
jQuery Question

Can't Disable Checked Checkbox

I'm trying to wite code that disables a checkbox if the previous is not checked. When I remove the previous check it fails to remove next checkbox check. If I remove it its automatically disabled but if I don't remove it its working and it's saving POST data. How can I remove it?

Here's what I'm doing (also on jsFiddle):

$(document).ready(function() {
$('.check').attr('disabled', true);
var ids = $(".check[id]").map(function() {
var number = 0;
var all = ids.sort();
var lowest = all[number];
$('#' + lowest).attr('disabled', false);

$('.check').change(function() {

if ($('#' + all[number]).is(':checked')) {

number = number + 1;
$('#' + all[number]).attr('disabled', false);

} else {

$('#' + all[number]).prop('checked', false); //That here is not doing anything dont know why.

$('#' + all[number]).prop('disabled', true);

number = number - 1



<script src=""></script>
<input type="checkbox" class="check" id='1471219200'>
<input type="checkbox" class="check" id='1470787200'>

Code does: When the lowest by date is not checked the next checkbox is disabled.And if you enable the lowest by date checkbox the next checkbox becomes enabled.

The problem:
Problem is that if you check the next checkbox and uncheck the lowest by date,the check from the second checkbox is not removed(+ not disabled)


After some question here is what i came with:

$(document).ready(function() {
  $('.check').prop('disabled', true); // Disable all the checkbox prior to execution

  var ids = $('.check[id]').map(function() { // Create a sorted array of your ids

  var number = 0; // The first element, the lowest also
  var lowest = ids[number]; // The lowest, kept that just to look like your code

  $('#' + lowest).prop('disabled', false); // Enable the first checkbox

  $(document).on('change', '.check',function() { // Add checkboxes change to action even to the one that might be added later on
    var element = $(this); // the element that has been clicked
    var isChecked = element.prop('checked'); // if the element is checked
    var isDisabled = element.prop('disabled'); // if the element is disabled, unused for now, might be usefull

    if (isChecked) { // we check if we are check or unchecking the checkbox 
      number++; // increment the ids index number
      element.siblings('#' + ids[number]).prop('disabled', !isChecked); // reenable the checkbox
    } else {
      var elementIndex = ids.indexOf(element.attr('id')); // get the index of the current element in the ids array
      while (number > elementIndex) { // loop through bigger id than ours
        element.siblings('#' + ids[number]).prop('disabled', true).prop('checked', false); // disable and uncheck any bigger ids

        number--; // decrement index
    console.log('index: '+ number + ', id: '+ ids[number]); // keep track of which index we are in

<script src=""></script>
<input type="checkbox" class="check" id="1471219200">
<input type="checkbox" class="check" id="1470787200">
<input type="checkbox" class="check" id="1470687200">
<input type="checkbox" class="check" id="1470587200">
<input type="checkbox" class="check" id="1470487200">

The problem was with the increment you made on number which didn't worked well on more than 2 checkboxes'. You were removing one tonumber` even though you were clicking 3 boxes lower


Credit for William Isted to remind me that the on() function existed.