jQuery中的禁用按钮

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

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

在Javascript中

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

但当我点击它时,它不会使我的按钮失效。

833892 次浏览

使用.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/ < a href = " http://jsfiddle.net/mblase75/2Nfu4/ " > < / >

试试这个代码:
HTML < br > < / p >

<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

下面是使用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

简单地说,它在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);
}

这是所有。

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

这对我来说很管用:

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

在我看来,这是最简单的方法:

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

我想在某些情况下禁用按钮,我正在使用第一个解决方案,但它不会为我工作。但是当我用第二个时,它是有效的。下面是来自浏览器控制台的输出。

< p > 1。 $ (" # psl2 .btn-continue”)。道具(“禁用”,真的)< / >强

<a class=​"btn btn-yellow btn-continue" href=​"#">​Next​</a>​
< p > 2。 $ (" # psl2 .btn-continue”).attr(“残疾”、“禁用”)< / >强

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

试试这个

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

禁用按钮:

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

启用按钮:

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

对于Jquery UI按钮,这是有效的:

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

使用箭头函数

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