隐藏时如何在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 site.js来切换模态。这个js在页脚中加载。

Javascript代码（在页脚中加载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');状态，应该返回取消选中。我尝试使用option但不行。

我的代码有什么问题吗？

Answer 1

这是一个工作代码段，不知道为什么你的代码不适合你，但你的代码在这里工作。尝试查看切换模式的方式。并尝试使用<input>

指定要初始化的iCheck元素

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

脚本效果很好。