JQueryMobile - 按钮

Question

如何使用 jquery mobile 禁用编码中的按钮？

<div data-role="button" id="val">Value</div>

[注意：我想在编码中禁用该按钮，而不是在设计时]

Answer 1

实例：http://jsfiddle.net/LHG4L/5/

HTML：

<div data-role="page">
    <div data-role="content">
        <input type="button" id="theButton" name="theButton" value="The Button">
    </div>
</div>

JS：

$('#theButton').attr('disabled',true);

更新：

链接按钮示例：

• http://jsfiddle.net/gRLYQ/6/

JS

var clicked = false;

$('#myButton').click(function() {
    if(clicked === false) {
        $(this).addClass('ui-disabled');
        clicked = true;
        alert('Button is now disabled');
    } 
});

$('#enableButton').click(function() {
    $('#myButton').removeClass('ui-disabled');
    clicked = false; 
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <a href="#" data-role="button" id="myButton">Click button</a>
        <a href="#" data-role="button" id="enableButton">Enable button</a>

    </div>
</div>

注意： - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons -types.html

样式类似于按钮的链接具有与 true 相同的视觉选项
下面基于表单的按钮，但有一些重要的区别。
基于链接的按钮不是按钮插件的一部分，仅使用
底层的buttonMarkup插件来生成按钮样式
不支持表单按钮方法（启用、禁用、刷新）。
如果您需要禁用基于链接的按钮（或任何元素），那么
可以自己应用禁用类 ui-disabled
JavaScript 也能达到同样的效果。

Answer 2

您可以并且应该使用 jquery 和 jquerymobile 禁用它：

$('#theButton').attr('disabled', true);
if ($('#theButton').button) $('#theButton').button('disable')

Answer 3

您可以使用属性 class="ui-disabled" 禁用按钮，如下所示：

<a href="index.html" data-role="button" class="ui-disabled">Link button</a>