在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

试试这段代码:
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

Answer 3

这里有两件事,根据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 4

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

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

试试这个

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

Answer 6

禁用按钮:

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

启用按钮:

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

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

就这样.