隐藏时如何删除 Bootstrap 模态上的 iCheck 检查状态？

Question

我尝试删除 Bootstrap 模态上的 iCheck checked 状态，但我尝试了很多次，都失败了。

我将 iCheck 用于输入类型复选框和单选。

所以这是模态代码：

  <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
              <form role="form" id="form-swab" class="form-horizontal" action="tambah">
                <div class="box-body">
                  <div class="form-group">
                    <label for="swab_parameter" class="col-sm-3 control-label">Parameter Uji</label>
                    <div class="col-sm-8">
                      <label>
                        <input type="checkbox" name="swab_parameter[]" id="swab_parameter_tpc" value="TPC">
                        TPC
                      </label>
                      <label>
                        <input type="checkbox" name="swab_parameter[]" id="swab_parameter_coliform" value="Coliform">
                        Coliform
                      </label>
                    </div>
                  </div>
                  <div class="form-group" id="hasil_swab_tpc">
                    <label for="swab_tpc" class="col-sm-3 control-label">Hasil TPC</label>
                    <div class="col-sm-8">
                      <input type="text" id="swab_tpc" name="swab_tpc" class="form-control" placeholder="Hasil Analisa TPC">
                    </div>
                  </div>
                  <div class="form-group" id="hasil_swab_coliform">
                    <label for="swab_coliform" class="col-sm-3 control-label">Hasil Coliform</label>
                    <div class="col-sm-8">
                      <input type="text" id="swab_coliform" name="swab_coliform" class="form-control" placeholder="Hasil Analisa Coliform">
                    </div>
                  </div>

                </div>
                <!-- /.box-body -->
                <input type="hidden" name="swab_ID" id="swab_ID" />
              </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" id="button-close-swab" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="submit-swab">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
  </div><!-- /.modal swab -->

我用 hashchange 切换模式（jquery.ba-bbq.min.js 来自 https://github.com/cowboy/jquery-bbq）。此 js 加载在页脚中。

Javascript 代码（加载页脚为 site.js）：

var path = window.location.pathname;
var host = window.location.hostname;

$(function(){
    $(window).hashchange(function(){
        var hash = $.param.fragment();

        if(hash == 'tambah'){
            if(path.search('mikro/swab') > 0){
                $('#myModal .modal-header .modal-title').text('Input Data Swab');
                $('#myModal .modal-footer #submit-swab').text('Simpan');
                $('#myModal #form-swab').attr('action','tambah');        
            }
            // other else if
        }
        // other else if

    });

    $(window).trigger('hashchange');

    $('#myModal').on('hidden.bs.modal', function(){
        window.history.pushState(null,null,path);
        $('#myModal form').find("input[type=text], input[type=email], input[type=password], textarea, select").val("");
        $('#myModal form').show();
        $('input').iCheck('uncheck');
    });

});

$('#swab_parameter_tpc, #swab_parameter_coliform').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});

$('#swab_parameter_tpc').on('ifChecked', function(event){
    $('#hasil_swab_tpc').show('slow');
});

$('#swab_parameter_coliform').on('ifChecked', function(event){
    $('#hasil_swab_coliform').show('slow');
});

$('#swab_parameter_coliform').on('ifUnchecked', function(event){
    $('#hasil_swab_coliform').hide('slow');
});

$('#swab_parameter_ym').on('ifUnchecked', function(event){
    $('#hasil_swab_ym').hide('slow');
});

问题是：当我打开模态框时，选中复选框并关闭模态框，然后再次打开模态框，复选框仍处于checked状态，应该回到取消选中状态。我尝试使用 $('input').iCheck('uncheck'); 但没有用。

我的代码有问题吗？

Answer 1

这是一个有效的片段，不确定为什么你的代码在你这边不起作用，但你的代码在这里工作。试着回顾一下你是如何切换你的模态的。并尝试指定要用 iCheck

初始化的 <input> 元素

$('#swab_parameter_tpc, #swab_parameter_coliform').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' // optional
  });

$('#myModal').on('hidden.bs.modal', function(){
    $('#myModal form').find("input[type=text], input[type=email], input[type=password], textarea, select").val("");
    $('#myModal form').show();
    $('input').iCheck('uncheck');
  });

  $('#swab_parameter_tpc').on('ifChecked', function(event){
      $('#hasil_swab_tpc').show('slow');
  });

  $('#swab_parameter_coliform').on('ifChecked', function(event){
      $('#hasil_swab_coliform').show('slow');
  });

  $('#swab_parameter_coliform').on('ifUnchecked', function(event){
      $('#hasil_swab_coliform').hide('slow');
  });

  $('#swab_parameter_ym').on('ifUnchecked', function(event){
      $('#hasil_swab_ym').hide('slow');
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-info" data-toggle="modal" data-target="#myModal">Try me</a> 
 
 <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
              <form role="form" id="form-swab" class="form-horizontal" action="tambah">
                <div class="box-body">
                  <div class="form-group">
                    <label for="swab_parameter" class="col-sm-3 control-label">Parameter Uji</label>
                    <div class="col-sm-8">
                      <label>
                        <input type="checkbox" name="swab_parameter[]" id="swab_parameter_tpc" value="TPC">
                        TPC
                      </label>
                      <label>
                        <input type="checkbox" name="swab_parameter[]" id="swab_parameter_coliform" value="Coliform">
                        Coliform
                      </label>
                    </div>
                  </div>
                  <div class="form-group" id="hasil_swab_tpc">
                    <label for="swab_tpc" class="col-sm-3 control-label">Hasil TPC</label>
                    <div class="col-sm-8">
                      <input type="text" id="swab_tpc" name="swab_tpc" class="form-control" placeholder="Hasil Analisa TPC">
                    </div>
                  </div>
                  <div class="form-group" id="hasil_swab_coliform">
                    <label for="swab_coliform" class="col-sm-3 control-label">Hasil Coliform</label>
                    <div class="col-sm-8">
                      <input type="text" id="swab_coliform" name="swab_coliform" class="form-control" placeholder="Hasil Analisa Coliform">
                    </div>
                  </div>

                </div>
                <!-- /.box-body -->
                <input type="hidden" name="swab_ID" id="swab_ID" />
              </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" id="button-close-swab" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="submit-swab">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
  </div><!-- /.modal swab -->

Answer 2

问题已解决。

问题出现在javascript，我尝试重新排序脚本，就像这样：

$('#myModal').on('hidden.bs.modal', function(){
    $('input').iCheck('uncheck');
    window.history.pushState(null,null,path);
    $('#myModal form').find("input[type=text], input[type=email], input[type=password], textarea, select").val("");
    $('#myModal form').show();
});

脚本运行良好。

隐藏时如何删除 Bootstrap 模态上的 iCheck 检查状态？

How to remove iCheck checked state on Bootstrap modal when hidden?

javascript

twitter-bootstrap

checkbox

bootstrap-modal

icheck