Question

如果未选中上一个，我尝试使用禁用复选框的代码。当我删除之前的检查时，它无法删除下一个复选框检查。如果我删除它会自动禁用但如果我不删除它的工作并且它保存了POST数据。我该如何删除它？

这是我正在做的事情（also on jsFiddle）：

＆＃13;

$(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
    }

  });

});

＆＃13;

<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'>

＆＃13;

代码确实：如果未选中最低截止日期，则会禁用下一个复选框。如果启用最低截止日期复选框，则会启用下一个复选框。

问题： 问题是，如果您选中下一个复选框并取消选中最低日期，则不会删除第二个复选框中的检查（+未禁用）

Answer 1

在这里提出一些问题之后我就来了：

＆＃13;

$(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

  });
});

＆＃13;

<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">

＆＃13;

问题在于您在number上所做的增量，即使您点击了3个方框，也没有在2 checkboxes'. You were removing one to个号码上运行良好

修改

感谢William Isted提醒我on() function已存在。

Answer 2

我相信这是你想要实现的目标，如果没有，我们可以扩展这个答案。

＆＃13;

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') );
    }
  
  })

});

＆＃13;

<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'>

＆＃13;

如果选择checkbox最高id，最低的将是checked和disabled。这同样适用于最低id;当checked最高id也是checked和disabled时。

无法禁用选中的复选框

2 个答案: