Question

我正在制作时间安排日历，在某些时候我需要将条件设置为如果选中并禁用复选框，则始终禁用。因此用户无法取消选中它。为此，我放了以下条件。但它没有用。

if($(this).is(':checked') && $(this).is(':disabled')){
   $(this).attr("disabled", true);
}

这是我工作的代码.. [更清楚地了解我的要求]

$('input[type="checkbox"]').on('change', function() {
  $(this).parent('label').nextAll('label').first().find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
 
$(this).parent('label').nextAll('label').first().find('input[type="checkbox"]').attr("disabled", $(this).is(':checked'));

$(this).parent('label').prevAll('label').first().find('input[type="checkbox"]').attr("disabled", $(this).is(':checked'));

 a= $(this).parent('label').prevAll('label').first().find('input[type="checkbox"]');
  
if(a.is(':checked')){
	a.attr("disabled",true);
}


if($(this).is(':checked')){ $(this).parent('label').prevAll('label').first().find('input[type="checkbox"]').attr("disabled", true);
}

if($(this).is(':checked') && $(this).is(':disabled')){
$(this).attr("disabled", true);
}


	


  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="one" value="a"> 08:00</label><br/>
<label><input type="checkbox" name="one" value="b"> 08:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:00</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 10:00</label><br/>
<label><input type="checkbox" name="one" value="f"> 10:30</label><br/>
<label><input type="checkbox" name="one" value="g" disabled> 11:00</label><br/>

检查10:30
并且 10:30和11:00将被检查，10：00将被禁用

检查09:30
09:30和10:00将检查，09：00禁用

取消选中09:30
09:30和10:00将取消选中，10：00将被禁用，但应禁用10:00

Answer 1

如果我理解正确，这可能会对你有所帮助。虽然，您需要描述完整的算法，以及它应该如何工作，以便考虑一些实现。目前，您只描述了一个案例。

＆＃13;

$('input[type="checkbox"]').on('change', function() {
      var $parent = $(this).parent('label');
      var $next = $parent.nextAll('label').first();
      var $prev = $parent.prevAll('label').first();
      if(!$parent.nextAll('label').slice(1,2).find('input[type="checkbox"]').is(':checked')){
          $next.find('input[type="checkbox"]').attr("disabled", $(this).is(':checked'));
      }
      $next.find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
      $prev.find('input[type="checkbox"]:not(:checked)').attr("disabled", $(this).is(':checked')); 

                    
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="one" value="a"> 08:00</label><br/>
<label><input type="checkbox" name="one" value="b"> 08:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:00</label><br/>
<label><input type="checkbox" name="one" value="c"> 09:30</label><br/>
<label><input type="checkbox" name="one" value="c"> 10:00</label><br/>
<label><input type="checkbox" name="one" value="f"> 10:30</label><br/>
<label><input type="checkbox" name="one" value="g" disabled> 11:00</label><br/>

＆＃13;

Answer 2

尝试阻止点击事件：

<dependency>
  <groupId>jstl</groupId>
  <artifactId>jstl</artifactId>
  <version>1.2</version>
  <scope>compile</scope>
</dependency>
<dependency>
  <groupId>taglibs</groupId>
  <artifactId>standard</artifactId>
  <version>1.1.2</version>
  <scope>compile</scope>
</dependency>

另外，我强烈建议缩短你的jQuery，如下：

$(this).on('click', function(e) {
    if($(this).is(':checked') && $(this).is(':disabled')) {
        return false;
    }
})

所以你可以使用

var $thisNext = $(this).parent('label').nextAll('label').first().find('input[type="checkbox"]')
var $thisPrev = $(this).parent('label').prevAll('label').first().find('input[type="checkbox"]')

而不是

$thisNext.prop('checked', $(this).is(':checked'));

它使您的代码更易于阅读和维护。

这是怎么回事？如果Checkbox已禁用且已选中，则应始终禁用它

2 个答案: