.checkboxradio（「刷新」）的問題，不與禁用預加載的字段

Question

一起工作下面的示例示出了2 checkbox（一個禁用和一個不），這是取消選中並禁用通過javascript，所述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的移動中的錯誤

的問題是，你不應該在disabled使用removeAttr。 ，我認爲這是他們在他們的代碼中使用的。

如果您可以影響您的服務器生成的html，我建議您更改disabled p roperty到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 -->