.checkboxradio('refresh')问题，不与禁用的预加载字段一起工作

Question

下面的示例显示了两个checkbox (一个禁用了，另一个没有)，通过javascript未被检查和禁用，checkbox (checkbox)不能正常工作。

如何解决这个问题？

​

function toggleProp(e, prop, selector) {
 var is = $(e).is(":checked"),
  $el = $(selector);

 if( $el.length ) {
  $el.each(function () {
   $(this).prop("checked", is).prop(prop,is).checkboxradio("refresh");
  })
 } else {
  $el.prop("checked",is).prop( prop,is).checkboxradio("refresh");
 }
}
function toggleAccount(e) {
 if( jQuery(e).is(':checked') ) {
  jQuery('#InitAccounts').prop('disabled',false).checkboxradio('refresh');
  jQuery('#InitAccounts2').prop('disabled',false).checkboxradio('refresh');
 } else {
  jQuery('#InitAccounts').prop('checked',false).checkboxradio('refresh');
  jQuery('#InitAccounts').prop('disabled',true).checkboxradio('refresh');
  jQuery('#InitAccounts2').prop('checked',false).checkboxradio('refresh');
  jQuery('#InitAccounts2').prop('disabled',true).checkboxradio('refresh');
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="page" id="install">
 <div data-role="main" class="ui-content">
  <form name="myForm" method="POST" action="/cgi-bin/sinfonix.pl?%20install%20Guest" enctype="multipart/form-data" target="connect9">

   <div class="ui-field-contain">
    <fieldset data-role="controlgroup" data-iconpos="right">
     <legend>Módulos a Activar</legend>
     <label for="SF_Module">Modulos Financiero</label>
     <input  id="SF_Module" name="Modules" type="checkbox" value="SF" data-theme="b" data-mini="true" onclick="toggleProp(this, 'disabled', '.SF');" onchange="toggleAccount(this)">
     <label for="CG_Module">&nbsp;&nbsp;&nbsp;Contabilidad General</label>
     <input  id="CG_Module" name="Modules" type="checkbox" value="CG" class="SF" data-mini="true" onchange="toggleAccount(this)">
    </fieldset>
   </div>

   <div class="ui-field-contain">
    <fieldset data-role="controlgroup">
     <legend>Cuentas Contables</legend>
     <label for="InitAccounts" >Inicializar Catalogo de Cuentas (funciona bien)</label>
     <input  id="InitAccounts"  name="InitAccounts"  type="checkbox" data-mini="true">
     <label for="InitAccounts2">Inicializar Catalogo de Cuentas (funciona mal)</label>
     <input  id="InitAccounts2" name="InitAccounts2" type="checkbox" data-mini="true" disabled>
    </fieldset>
   </div>
  </form>
 </div><!-- /main -->
</div><!-- /page -->

​

Answer 1

花了一些时间来理解这个问题，我认为这是jquery中的一个bug。

问题是您不应该在disabled上使用disabled，我认为这就是他们在代码中使用的。

如果您可能影响服务器生成的html，我建议您将disabled属性更改为data-disabled，并在页面加载时使用它：

$(function() {
  $('input[type="checkbox"][data-disabled]').prop('disabled', true);
});

下面是一个基于该更改的工作示例：

​

$(function() {
  $('input[type="checkbox"][data-disabled]').prop('disabled', true);
});

function toggleProp(e, prop, selector) {
 var is = $(e).is(":checked"),
  $el = $(selector);

 if( $el.length ) {
  $el.each(function () {
   $(this).prop("checked", is).prop(prop,is).checkboxradio("refresh");
  })
 } else {
  $el.prop("checked",is).prop( prop,is).checkboxradio("refresh");
 }
}
function toggleAccount(e) {
 if( jQuery(e).is(':checked') ) {
  jQuery('#InitAccounts').prop('disabled',false).checkboxradio('refresh');
  jQuery('#InitAccounts2').prop('disabled',false).checkboxradio('refresh');
 } else {
  jQuery('#InitAccounts').prop('checked',false).checkboxradio('refresh');
  jQuery('#InitAccounts').prop('disabled',true).checkboxradio('refresh');
  jQuery('#InitAccounts2').prop('checked',false).checkboxradio('refresh');
  jQuery('#InitAccounts2').prop('disabled',true).checkboxradio('refresh');
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<div data-role="page" id="install">
 <div data-role="main" class="ui-content">
  <form name="myForm" method="POST" action="/cgi-bin/sinfonix.pl?%20install%20Guest" enctype="multipart/form-data" target="connect9">

   <div class="ui-field-contain">
    <fieldset data-role="controlgroup" data-iconpos="right">
     <legend>Módulos a Activar</legend>
     <label for="SF_Module">Modulos Financiero</label>
     <input  id="SF_Module" name="Modules" type="checkbox" value="SF" data-theme="b" data-mini="true" onclick="toggleProp(this, 'disabled', '.SF');" onchange="toggleAccount(this)">
     <label for="CG_Module">&nbsp;&nbsp;&nbsp;Contabilidad General</label>
     <input  id="CG_Module" name="Modules" type="checkbox" value="CG" class="SF" data-mini="true" onchange="toggleAccount(this)">
    </fieldset>
   </div>

   <div class="ui-field-contain">
    <fieldset data-role="controlgroup">
     <legend>Cuentas Contables</legend>
     <label for="InitAccounts" >Inicializar Catalogo de Cuentas (funciona bien)</label>
     <input  id="InitAccounts"  name="InitAccounts"  type="checkbox" data-mini="true">
     <label for="InitAccounts2">Inicializar Catalogo de Cuentas (funciona mal)</label>
     <input  id="InitAccounts2" name="InitAccounts2" type="checkbox" data-mini="true" data-disabled>
    </fieldset>
   </div>
  </form>
 </div><!-- /main -->
</div><!-- /page -->

​