禁用和启用 html 输入按钮

Posted 2023-03-14

【中文标题】禁用和启用 html 输入按钮

【英文标题】：Disabling and enabling a html input button

【发布时间】：2012-11-29 16:12:53

【问题描述】：

所以我有一个这样的按钮：

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

如何在需要时禁用和启用它？我已经尝试过disabled="disable"，但重新启用它是个问题。我尝试将其设置回 false 但这并没有启用它。

【问题讨论】：

启用它是什么意思？一旦你禁用它，你就不能用同样的方法重新启用它Me()我希望你知道（因为它被禁用了）

我要做的是在某些事件发生时禁用和启用按钮。

【参考方案1】：

由于您首先禁用它，因此启用它的方法是将其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="" />

您需要完全删除该属性或设置其属性。

【讨论】：

如果我希望按钮先启用然后再禁用怎么办？我也试过启用=“真”。 enable 是正确的关键字吗？？

@k.ken 不，关键字是“禁用”。如果您希望最初启用该按钮，请不要将属性 disabled 放入。只需使用<input type="button" value="Submit" />。并且在更改状态时，使用.prop("disabled", true);（或false）

【参考方案2】：

disable 属性只有一个参数。如果要重新启用它，则必须删除整个内容，而不仅仅是更改值。

【参考方案3】：

使用 Javascript

禁用 html 按钮

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

启用 html 按钮

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

Demo Here

---

使用 jQuery

​​>

jQuery 1.6 之前的所有版本

禁用 html 按钮

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

启用 html 按钮

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

Demo Here

jQuery 1.6 之后的所有版本

禁用 html 按钮

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

启用 html 按钮

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

Demo Here

附注更新了基于jquery 1.6.1 changes的代码。作为建议，请始终使用最新的 jquery 文件和 prop() 方法。

【讨论】：

我需要那里的属性才能使其工作吗？像 disables="disable"

不，在$(document).ready 内，您可以致电$('#Button').attr('disabled','disabled');。这将禁用页面加载按钮。而当某些事件发生时，您可以拨打$('#Button').removeAttr('disabled');再次启用它...

禁用后如何添加灰色样式？

@LeiYang 你可以添加一些css比如this

请注意 true 和 false 是布尔值，而不是字符串，正如 palash 正确写的那样

【参考方案4】：

只需直接使用 JavaScript，您就可以相当轻松地做到这一点，无需任何库。

启用按钮

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

禁用按钮

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

不需要外部库。

【参考方案5】：

$(".btncancel").button( disabled: true );

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

【参考方案6】：

这肯定行得通。

禁用按钮

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

启用按钮

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

【参考方案7】：

坚持php...

为什么不只在满足上述条件时才允许按钮出现。

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

?>

【参考方案8】：

没有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>

【讨论】：

怀疑，我很惊讶这实际上适用于刚刚测试的 Chrome、Edge、FF 和 Brave。显然这不是推荐的做法（请参阅：***.com/a/3434388/1236837）所以我不太可能使用它，但一个有趣的发现。

@KellyCode 我同意你的观点，他使用元素 ID 的 OP 方法通常不好（对于非常小的项目或用于缩短可读代码的 sn-ps 可能可以接受）

【参考方案9】：

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

【参考方案10】：

虽然与问题没有直接关系，但如果您跳到这个问题上并希望禁用除典型输入元素 button, input, textarea 之外的其他内容，则该语法将不起作用。

要禁用 div 或 span，请使用 setAttribute

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

P.S：知道了，只有在您打算禁用时才调用它。 chrome 版本 83 中的一个错误导致即使第二个参数为 false，它也始终禁用。

【参考方案11】：

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

（并且 React 与 refs。如果不使用 React，则将“elementRef.current”替换为元素选择）

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

启用：

 elementRef.current.removeAttribute('disabled');

【参考方案12】：

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

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

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

【讨论】：

这在Accepted Answer中已经提到。

【参考方案13】：

如果 disabled 有问题（就像我在使用 Typescript 的 dom 时发生的那样），另一个选项也可以是应用不透明度并传递一个空回调。

    const button = document.getElementById("some-button");
    button.style.opacity = "0.5"
    button.onclick = () => ;