.checkboxradio('refresh') issue, does not work in conjunction with disabled preloaded fields

Question

The following example shows 2 checkbox (one disabled and one not), which are unchecked and disabled through javascript, the checkbox (disabled) does not work correctly.

How to solve this problem? ;((

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

Took some time to understand the problem there and I think it's a bug in jquery-mobile.

The problem is that you should not use removeAttr on disabled, and I think this is what they use in their code.

In case you can affect the html that your server generates, I suggest you change the disabled property to data-disabled and use it when the page loads:

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

Here is a working example, based on that change:

$(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 -->