jQuery中的禁用按钮答案

【问题标题】：Disable button in jQueryjQuery中的禁用按钮
【发布时间】：2013-02-13 21:01:30
【问题描述】：

我的页面创建多个按钮为id = 'rbutton_"+i+"'。以下是我的代码：

<button type='button' id = 'rbutton_"+i+"' onclick=disable(i);>Click me</button>

在 Javascript 中

function disable(i){
    $("#rbutton'+i+'").attr("disabled","disabled");
}

但是当我点击它时它不会禁用我的按钮。

【问题讨论】：

'rbutton_"+i+"' 不是有效的 ID。
如何指定 id。它是在我的 javascript 中的 for 循环中创建的。
创建一个 jsFiddle 怎么样让我们可以看到你在做什么？
你可能想要disable(this)和function disable(elem) { $(elem).attr("disabled","disabled") }
jQuery 可以使用它们的索引号来寻址元素，所以如果你做得对，你甚至可能不需要 ID。您可以将 disable(this) 作为自引用传递。

标签： jquery

【解决方案1】：

改用.prop（并清理您的选择器字符串）：

function disable(i){
    $("#rbutton_"+i).prop("disabled",true);
}

生成的 HTML：

<button id="rbutton_1" onclick="disable(1)">Click me</button>
<!-- wrap your onclick in quotes -->

但“最佳实践”方法是使用 JavaScript 事件绑定和 this 代替：

$('.rbutton').on('click',function() {
    $(this).prop("disabled",true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="rbutton">Click me</button>

http://jsfiddle.net/mblase75/2Nfu4/

【讨论】：

这是我创建的一个小小提琴。请让我做错了什么。 jsfiddle.net/2Nfu4/3
好的。它在 No Wrap - in Head..但我可以问为什么吗？可能这是类似的东西，我没有在我的实际代码中这样做！
看起来就像 jsFiddle 的设置方式——如果你想准确分析发生了什么，你可以在浏览器中“检查元素”。
这很好用。只要确保如果您使用 ajax，您在成功和错误情况下启用按钮。不是在 ajax 调用结束时。因为那样它会立即启用，而您根本看不到禁用。
使用 jQuery 1.10.2 它可以在 IE 11 中运行，但不能在 Chrome 版本 39.0.2171.95 m 中运行。可疑的是，用于此答案的小提琴不提供 jQuery 1.10.2

【解决方案2】：

这是我认为最简单的方法：

// All buttons where id contains 'rbutton_'
const $buttons = $("button[id*='rbutton_']");

//Selected button onclick
$buttons.click(function() {
    $(this).prop('disabled', true); //disable clicked button
});

//Enable button onclick
$('#enable').click(() =>
    $buttons.prop('disabled', false) //enable all buttons
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rbutton_200">click</button>
<button id="rbutton_201">click</button>
<button id="rbutton_202">click</button>
<button id="rbutton_203">click</button>
<button id="rbutton_204">click</button>
<button id="rbutton_205">click</button>
<button id="enable">enable</button>

【讨论】：

非常好的先生。这完全有效。即使使用引导按钮。

【解决方案3】：

试试这个代码：
HTML

<button type='button' id = 'rbutton_'+i onclick="disable(i)">Click me</button>

功能

function disable(i){
    $("#rbutton_"+i).attr("disabled","disabled");
}

使用 jquery 的其他解决方案

$('button').click(function(){ 
    $(this).attr("disabled","disabled");
});

DEMO

纯javascript的其他解决方案

<button type='button' id = 'rbutton_1' onclick="disable(1)">Click me</button>

<script>
function disable(i){
 document.getElementById("rbutton_"+i).setAttribute("disabled","disabled");
}
</script>

DEMO2

【讨论】：

第二个 .click() 函数在您的演示中完美运行。但是我必须使用您的第一个解决方案中提到的单独方法，但它不起作用。你能帮忙吗！
添加了第三种纯javascript解决方案@user2047817

【解决方案4】：

这里有两件事，根据 OPs 问题，最高投票的答案在技术上是正确的。

简单概括为：

$("some sort of selector").prop("disabled", true | false);

但是，如果您使用 jQuery UI（我知道 OP 不是，但有些人可能会到达这里），那么虽然这将禁用按钮单击事件，但不会使按钮根据 UI 样式显示为禁用。

如果您使用的是 jQuery UI 样式按钮，则应通过以下方式启用/禁用它：

$("some sort of selector").button("enable" | "disable");

http://api.jqueryui.com/button/#method-disable

【讨论】：

【解决方案5】：

禁用按钮：

$('#button_id').attr('disabled','disabled');

启用按钮：

$('#button_id').removeAttr('disabled');

【讨论】：

【解决方案6】：

试试这个

function disable(i){
    $("#rbutton_"+i).attr("disabled",true);
}

【讨论】：

【解决方案7】：

只是它工作正常，在 HTML 中：

<button type="button" id="btn_CommitAll"class="btn_CommitAll">save</button>

在 JQuery 端把这个函数用于禁用按钮：

function disableButton() {
    $('.btn_CommitAll').prop("disabled", true);
}

启用按钮：

function enableButton() {
    $('.btn_CommitAll').prop("disabled", false);
}

就是这样。

【讨论】：

【解决方案8】：

这是使用 ajax 的方法。

$("#updatebtn").click(function () {
    $("#updatebtn").prop("disabled", true);
    urlToHandler = 'update.ashx';
            jsonData = data;
            $.ajax({
                url: urlToHandler,
                data: jsonData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    $("#lbl").html(data.response);
                    $("#updatebtn").prop("disabled", false);
                    //setAutocompleteData(data.response);
                },
                error: function (data, status, jqXHR) {
                    alert('There was an error.');
                    $("#updatebtn").prop("disabled", false);
                }
            }); // end $.ajax

【讨论】：

在某些版本的jQuery中，你必须使用.attr('disabled', true)。我不知道是哪个，但我必须使用的版本（缩小并作为我正在开发的应用程序的一部分捆绑）抛出object does not support prop

【解决方案9】：

这对我有用：

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>

【讨论】：

【解决方案10】：

我想在某些情况下禁用按钮，我使用的是第一种解决方案，但它对我不起作用。但是当我使用第二个时它起作用了。下面是浏览器控制台的输出。

1。 $('#psl2 .btn-continue').prop("disabled", true)

<a class="btn btn-yellow btn-continue" href="#">Next</a>

2。 $('#psl2 .btn-continue').attr("disabled","disabled")

<a class="btn btn-yellow btn-continue" href="#" disabled="disabled">Next</a>

【讨论】：

【解决方案11】：

对于 Jquery UI 按钮，这是可行的：

$("#buttonId").button( "option", "disabled", true | false );

【讨论】：