Javascript 如何禁用 jQuery Mobile 中的链接按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6438659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable a link button in jQuery Mobile?
提问by RickardP
I have a jQuery Mobile Beta 1 website with jQuery 1.6.1 link button like this:
我有一个带有 jQuery 1.6.1 链接按钮的 jQuery Mobile Beta 1 网站，如下所示：
<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>
And in document.ready i set the click event:
在 document.ready 中，我设置了点击事件：
$('#subselection').livequery("click", function(){
alert('test');
});
I whant to disable this "link button" and i tried
我想禁用这个“链接按钮”，我试过了
$('#subselection').button('disable')
And that command set the button style like it is disabled but the click event works.
该命令将按钮样式设置为禁用，但单击事件有效。
I have also tried
我也试过
$('#subselection').prop('disabled', true);
and $('#subselection').prop('disabled'); gives true but its not disabled.
和 $('#subselection').prop('disabled'); 给出 true 但它没有被禁用。
Someone has a good idea.
有人有一个好主意。
采纳答案by Niklas
The aelement does not have a property disabled. So defining one won't affect any event handlers you may have attached to it.
该a元素没有属性disabled。因此，定义一个不会影响您可能附加到它的任何事件处理程序。
example: http://jsfiddle.net/niklasvh/n2eYS/
示例：http: //jsfiddle.net/niklasvh/n2eYS/
For a list of available attributes, have a look at the HTML 5 reference.
有关可用属性的列表，请查看HTML 5 参考。
To solve your problem, you could instead for example assign the disabledas datain the element:
为了解决您的问题，您可以改为例如在元素中分配disabledas data：
$('#subselection').data('disabled',true);
$('#subselection').data('disabled',true);
and then in your event check if its set:
然后在您的活动中检查它是否设置：
if (!$(this).data('disabled'))
if (!$(this).data('disabled'))
回答by Phill Pafford
Link button example:
链接按钮示例：
JS
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
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>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
注意： - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.
样式为按钮的链接与下面的基于表单的按钮具有所有相同的视觉选项，但有一些重要的区别。基于链接的按钮不是按钮插件的一部分，只是使用底层的 buttonMarkup 插件来生成按钮样式，因此不支持表单按钮方法（启用、禁用、刷新）。如果您需要禁用基于链接的按钮（或任何元素），可以使用 JavaScript 自己应用 disabled 类 ui-disabled 以达到相同的效果。
回答by Gilly
No need for jquery/javascript in this case. Simply add a 'ui-disabled' class.
在这种情况下不需要 jquery/javascript。只需添加一个 'ui-disabled' 类。
Like for example:
例如：
<a class="ui-disabled" id="subselection" href="#" data-role="button" data-theme="b">TEST</a>
Thats what I do, and it works for me ;)
这就是我所做的，它对我有用;)
回答by Erik Yuzwa
try using
尝试使用
$('#subselection').button().button('disable'); //disable in JQM
$('#subselection').button().button('enable'); //enable in JQM
this seems to work visually to display a disable / enable style...HOWEVER the "button" is still clickable (so watch out! :P )
这似乎可以在视觉上显示禁用/启用样式......但是“按钮”仍然可以点击（所以要小心！：P）
回答by Richard Kersey
I know there's already an accepted answer to this, but I think this answer is much easier to understand. Just have the click function return false.
我知道已经有一个公认的答案，但我认为这个答案更容易理解。只需让点击函数返回 false。
<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>
<script>
$('#subselection').click(function() {
alert("do some code here");
return false;
});
</script>
回答by Danny C
You could alternatively just use the button tag/widget directly <button>TEST</button>which does have proper disabling. If you are just using it to catch an event and run some JavaScript not sure what advantage there would be in using a link.
您也可以直接使用<button>TEST</button>具有适当禁用功能的按钮标签/小部件。如果您只是使用它来捕获事件并运行一些 JavaScript，则不确定使用链接有什么优势。
