CODEWITHSUNDEEP
jquerycheckbox
Sebastian Jeliazkov
Sebastian Jeliazkov

Reputation: 91

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() {
    return this.id;
  }).get();
  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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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)

Upvotes: 0

Views: 894

Answers (2)

Chax
Chax

Reputation: 1061

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
    return this.id;
  }).get().sort();

  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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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

edit

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

Upvotes: 2

William Isted
William Isted

Reputation: 12322

I believe that this is what you are trying to achieve, if not, we can expand upon this answer.

jQuery(function($) {

  var ids = $('.check').map(function() {
  	return this.id;
  }).get();
  
  var min = Math.min(...ids);
  var max = Math.max(...ids);
  
  $( document ).on( 'change', '.check', function() {
  
    var self = $(this);
    
    if ( $(this).attr('id') == min ) {
    	$( '#' + max ).prop( 'checked', self.is(':checked') ).prop( 'disabled', self.is(':checked') );
    } else if ( $(this).attr('id') == max ) {
    	$( '#' + min ).prop( 'checked', self.is(':checked') ).prop( 'disabled', self.is(':checked') );
    }
  
  })

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" class="check" id='1471219200'>
<input type="checkbox" class="check" id='1470787200'>
<input type="checkbox" class="check" id='1471219201'>
<input type="checkbox" class="check" id='1470787202'>
<input type="checkbox" class="check" id='1471219203'>
<input type="checkbox" class="check" id='1470787234'>
<input type="checkbox" class="check" id='1471219225'>
<input type="checkbox" class="check" id='1470787226'>
<input type="checkbox" class="check" id='1471219213'>
<input type="checkbox" class="check" id='1470787210'>

If the checkbox with the highest id is selected; the lowest will be checked and disabled. The same applies to the lowest id; when checked the highest id is also checked and disabled.

Upvotes: 0

Related Questions