我的页面创建了多个按钮id = 'rbutton_"+i+"'。下面是我的代码:
id = 'rbutton_"+i+"'
<button type='button' id = 'rbutton_"+i+"' onclick=disable(i);>Click me</button>
在Javascript中
function disable(i){ $("#rbutton'+i+'").attr("disabled","disabled"); }
但当我点击它时,它不会使我的按钮失效。
使用.prop代替(并清理你的选择器字符串):
.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 -->
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>
我想在某些情况下禁用按钮,我正在使用第一个解决方案,但它不会为我工作。但是当我用第二个时,它是有效的。下面是来自浏览器控制台的输出。
<a class="btn btn-yellow btn-continue" href="#">Next</a>
<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));