Javascript或JQuery的：停用单选按钮

Question

http://jsfiddle.net/tearex/jFS2x/4/

<fieldset data-role="controlgroup" data-type="horizontal" > 
    <input name="btn1" id="a1" type="radio" /> 
    <label for="a1">1 populate USA</label> 

    <input name="btn1" id="a2" type="radio" /> 
    <label for="a2" class="bigga">2 populate Germany</label> 

    <select data-role="slider" id="how" > 
     <option value="naturally" accesskey="" >naturally</option> 
     <option value="forcibly" > forcibly</option> 
    </select>   
</fieldset> 

如何使停用按钮灰色瞬间脱落？

我尝试这样做：

document.getElementById("a1").disabled = true; 
$("[id='how']").slider("disable") 

但不同的滑块，直到我点击另一个按钮不会变成灰色。

Answer 1

jsFiddle Demo

你禁用它正常的，但jQuery Mobile的CSS没有显示它。单选按钮实际上被包装在与ui-radio &类的div中，以直观地看到它已被禁用，需要添加新类别ui-disabled。

$('#a1').prop('disabled',true); 
$('#a1').parent('.ui-radio').addClass('ui-disabled'); 

注：请不要（少数例外ofcourse。）混合的JavaScript & jQuery的你不应该写document.getElementById("a1").disabled = true;，你也许能写$('#a1').prop('disabled',true);

Answer 2

只需使用

$("#a1").checkboxradio('disable'); 

而不是手动禁用输入。

另见http://jquerymobile.com/demos/1.2.0/docs/forms/radiobuttons/methods.html