javascript - .checkboxradio ('refresh' )问题，无法与禁用的预加载字段一起使用

Question

以下示例显示了 2 个复选框(一个禁用，一个未禁用)，它们通过 javascript 未选中并禁用，复选框(禁用)无法正常工作。

如何解决这个问题？ ;((

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-mobile 中的一个错误。

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

如果您可以影响服务器生成的 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 -->