禁用和启用html输入按钮

我有一个这样的按钮:

<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>

当我需要时，我如何禁用和启用它?我已经尝试了disabled="disable"，但启用它回来是一个问题。我试着把它设置回false，但那没有启用它。

903306 次浏览
小开

因为你首先要禁用它，所以启用它的方法是将其disabled属性设置为false。

要在Javascript中改变它的disabled属性，你可以使用:

var btn = document.getElementById("Button");
btn.disabled = false;

很明显，要再次禁用它，你应该使用true代替。

因为你也用jQuery标记了问题，你可以使用.prop方法。喜欢的东西:

var btn = $("#Button");
btn.prop("disabled", true);   // Or `false`

这是jQuery的新版本。旧的方法是添加或删除一个属性，如下所示:

var btn = $("#Button");
btn.attr("disabled", "disabled");
// or
btn.removeAttr("disabled");

disabled属性的存在禁用了该元素，因此不能将其值设置为“false”。即使下面的代码也应该禁用该元素

<input type="button" value="Submit" disabled="" />

你需要完全删除属性或设置它的属性。

小开

disable属性只有一个参数。如果你想重新启用它，你必须删除整个东西，而不仅仅是改变值。

小开
最佳答案

使用Javascript

  • 禁用html按钮

    document.getElementById("Button").disabled = true;

  • Enabling a html button

    document.getElementById("Button").disabled = false;

  • Demo Here

Using jQuery

All versions of jQuery prior to 1.6

  • Disabling a html button

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

  • Enabling a html button

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

  • Demo Here

All versions of jQuery after 1.6

  • Disabling a html button

    $('#Button').prop('disabled', true);

  • Enabling a html button

    $('#Button').prop('disabled', false);

  • Demo Here

P.S. Updated the code based on jquery 1.6.1 changes. As a suggestion, always use the latest jquery files and the prop() method.

小开

只需Vanilla JavaScript就可以很容易地做到这一点，不需要任何库。

启用按钮

document.getElementById("Button").disabled=false;

禁用按钮

 document.getElementById("Button").disabled=true;

不需要外部库。

小开 
$(".btncancel").button({ disabled: true });

这里'btncancel'是按钮的类名。

小开

这肯定会奏效。

禁用按钮

$('#btn_id').button('disable');

启用按钮

$('#btn_id').button('enable');
小开

坚持使用php…

为什么不只是允许按钮出现一旦上述条件得到满足。

<?
if (whatever == something) {
$display = '<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>';
return $display;
}
?>
小开

没有jQuery禁用输入会更简单

Button.disabled=1;


function dis() {
Button.disabled= !Button.disabled;
}
<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>


<button onclick="dis()">Toggle disable</button>

小开 
 <!--Button Disable Script-->
<script type="text/javascript">
function DisableButton() {
document.getElementById("<%=btnSave.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>
<!--Button Disable Script-->
小开

虽然与问题没有直接关系，但如果你跳到这个问题上寻找禁用典型输入元素button, input, textarea以外的东西，语法将不起作用。

要禁用div或span，使用setAttribute

document.querySelector('#somedivorspan').setAttribute('disabled', true);

p.s.:明白了，只有当你打算禁用时才调用这个。chrome 83版本的一个错误导致即使第二个参数为false，该选项也总是禁用。

小开

使用JavaScript禁用/启用html输入按钮:

(以及与裁判反应。取代“elementRef.current"如果不使用React，则使用元素选择)

 elementRef.current.setAttribute('disabled', 'disabled');

启用:

 elementRef.current.removeAttribute('disabled');
小开

使用jQuery，你可以在一行中完成

//Enable
$('#Button').prop('disabled', false)


//Disable
$('#Button').prop('disabled', true)

提交答案