Question

我目前正在使用http://www.bootstrap-switch.org/是否有脚本，以便我可以限制切换开关的数量。这是我的代码

<script type="text/javascript">
  $(function(argument) {
    $('[type="checkbox"]').bootstrapSwitch();
    var limit = 5;
    $('[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
      //event listener
    });
  });
</script>

 <input type="checkbox">
 <input type="checkbox">
 <input type="checkbox">
 <input type="checkbox">
 <input type="checkbox">

请让我知道如何做到这一点。感谢

Answer 1

尝试：

 $('[type="checkbox"]').bootstrapSwitch();

 var limit = 2;
 $('[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {

   if ($('[type="checkbox"]:checked').length > limit) {
     $(this).bootstrapSwitch('state', !state, true);
     alert('You are allowed to check a maximum of ' + limit + ' options')
   }
 });

jsfiddle：https://jsfiddle.net/Lj1v6nvs/1/

Answer 2

为click事件添加一个额外的事件处理程序，它可以在触发bootstrapSwitch之前取消switchChange。像这样：

$('[type="checkbox"]').on('click',function(e) {
       if($(this).siblings(':checked').length >= limit) {
         e.preventDefault();
         alert("You have already reached the limit");
         return false;
       }
});

Answer 3

做这样的事情 -

var limit = 5;
$('[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
    if($('[type="checkbox"]:checked').length > limit ) {
        alert('You are allowed to check '+limit+' options'); /*show alert when more than limit are selected*/
        $(this).prop('checked', false); /* uncheck the last one checked*/
    }
});

限制bootstrap上的切换开关数量

3 个答案: