禁用 jQuery 中的按钮

Question

我的页面创建了多个按钮作为

id = 'rbutton_"+i+"'

。下面是我的代码：

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

在 JavaScript 中

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

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

Answer 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/

Answer 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>

Answer 3

禁用按钮：

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

启用按钮：

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

Answer 4

试试这个代码：
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");
});

演示

---

其他纯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>

演示2

Answer 5

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

简单概括为：

$("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

Answer 6

试试这个

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

Answer 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);
}

仅此而已。

Answer 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

Answer 9

这对我有用：

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

Answer 10

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

1. $('#psl2 .btn-Continue').prop("已禁用", true)

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

2. $('#psl2 .btn-Continue').attr("已禁用","已禁用")

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

Answer 11

按类和“this”选择器调用函数，这是比使用名为 -> onclick=disable(i); 的内联 onClick 函数的最佳方法； 对于多个按钮

注意：对所有需要禁用功能的按钮使用相同的类名

在 header 或之前 你的 js 脚本中使用 jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

方法1

HTML

<button type='button' class="btnClick" id = 'rbutton_"+i+"'>Click me</button>

JS

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

方法2

$('.btnClick').on('click', function(){
    disable(this.id)
})

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

这两种方法都可以在多个按钮/元素单击时完美运行。

#如果我的代码有任何问题或错误，请在下面评论。

Answer 12

对于 Jquery UI 按钮，这有效：

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

Answer 13

您可以简单地使用

disable

或

enable

方法：

$('#button-id').disable();
$('#button-id').enable();

Answer 14

使用箭头功能

$('#button-id').on('click', e => $(e.target).prop('disabled', true));