Javascript 为什么双击时Bootstrap 3折叠与复选框状态不同步?

Javascript 为什么双击时Bootstrap 3折叠与复选框状态不同步?,javascript,jquery,css,twitter-bootstrap,checkbox,Javascript,Jquery,Css,Twitter Bootstrap,Checkbox,根据这个问题:“我尝试过这个解决方案,因为它简单明了 我有驾驶执照 A. B C D E 但有了这个“解决方案”,你就有问题了。如果快速单击复选框,则该区域将折叠,但复选框已选中 如何防止双击问题 我正在使用: 引导程序3 jQuery 3.1.1 我想这对你会有用的 $('.collapse').collapse() $(“#检查”).one('click',函数(事件){ event.preventDefault(); //做点什么 }); .小组委员会{ 填充:4px50px;

根据这个问题:“我尝试过这个解决方案,因为它简单明了


我有驾驶执照
A.
B
C
D
E
但有了这个“解决方案”,你就有问题了。如果快速单击复选框,则该区域将折叠,但复选框已选中

如何防止双击问题

我正在使用:

  • 引导程序3
  • jQuery 3.1.1

    • 我想这对你会有用的

      $('.collapse').collapse()
      $(“#检查”).one('click',函数(事件){
      event.preventDefault();
      //做点什么
      });
      
      
      .小组委员会{
      填充:4px50px;
      }
      我有驾驶执照
      A.
      B
      C
      D
      E
      
      折叠时禁用复选框:

      我有驾驶执照
      $('.collapse').on('show.bs.collapse hide.bs.collapse',function()){
      $('license_check_box').prop('disabled',true);
      }).on('show.bs.collapse hidden.bs.collapse',function(){
      $('license_check_box').prop('disabled',false);
      });
      
      由于引导中没有专门用于切换的双击处理,所以我提出了一个特殊的解决方案,使双击同步

      我刚刚删除了
      data toggle=“collapse”
      属性,将
      #testCheckBox
      id添加到checkbox的父项
      div
      ,并编写了一些自定义脚本,检测双击或单击,然后验证复选框值并根据它们进行切换:

      $('.collapse').collapse();
      
      $("#testCheckBox :checkbox").bind('click dblclick', function(evt) {
          console.log(evt.type);
      
          if ($(this).is(":checked")) {
              $('.collapse').slideDown('fast');
          } else {
              $('.collapse').slideUp('fast');
          }
      })
      

      演示:

      这不是解决方案,我认为问题在于再次双击复选框我还测试了我没有面对这个问题我不理解你的解决方案,如果你双击复选框,多次复选框状态与折叠div异步。@adityashrivastava尝试多次双击和watchwait我将为您提供此解决方案,效果非常好!谢谢你,我很高兴,希望你能想到:)很好的解决方案,但我使用了@mumair的解决方案!
      <input id="license_check_box" type="checkbox"/> I have Driver License   
      
      $('.collapse').on('show.bs.collapse hide.bs.collapse', function() {
          $('#license_check_box').prop('disabled', true);
      }).on('shown.bs.collapse hidden.bs.collapse', function() {
          $('#license_check_box').prop('disabled', false);
      });
      
      $('.collapse').collapse();
      
      $("#testCheckBox :checkbox").bind('click dblclick', function(evt) {
          console.log(evt.type);
      
          if ($(this).is(":checked")) {
              $('.collapse').slideDown('fast');
          } else {
              $('.collapse').slideUp('fast');
          }
      })