使用按钮用javascript切换文本框的状态

Toggle state of textbox with javascript using a button

本文关键字：状态 文本 按钮 javascript      更新时间：2024-04-14

我有一个如下形式：

<form>
<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock" onMouseDown="toggleInput()"></button>
</form>

和javascript代码：

function toggleInput(){
    if ($("#input").disabled){
        $("#input").disabled = false;
    }
    else {
        $("#input").disabled = true;
    };
}

我基本上想做的是检查文本框处于状态（启用/禁用），然后相应地切换状态。我不知道javascript部分是否使用了正确的语法来检查文本框是否被禁用，但这是我能想到的。

提前感谢！

编辑：为什么我选择使用onmousedown而不是onclick来执行带有按钮的事件的原因：

我选择使用onmousedown而不是onclick，因为它让我正在构建的应用程序感觉不那么笨重，因为onclick有这个功能：当你点击一个按钮，然后在按住鼠标按钮的同时将光标从按钮上拖走，然后当光标位于网页上远离按钮的区域时，则不会执行该事件。因此，我选择使用onmousedown来克服这一问题。

使用.prop()，获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性

 $("#input").prop('disabled',!$("#input").prop('disabled'))

演示

我不知道你为什么使用onMouseDown。使用click代替

$("#lock").on("click", function() {
    $("#input").prop('disabled',!$("#input").prop('disabled'))
});

点击演示

要使用jQuery，请尝试以下操作：

$("#input").prop("disabled", function(i, v) { return !v; });

您现有的代码不起作用，因为DOM元素有.disabled属性，而jQuery对象没有。

我不知道为什么要使用onmousedown而不是onclick作为按钮，但无论哪种方式，如果要使用jQuery，我都建议删除内联事件属性，以便将处理程序与jQuery绑定：

$("#lock").on("click", function() {
    $("#input").prop("disabled", function(i, v) { return !v; });
});

（您需要将该代码包含在正文末尾的脚本块中或文档就绪处理程序中。）

演示：http://jsfiddle.net/a7f8v/

您应该用jQuery而不是onMouseDown事件附加事件处理程序。语法可能如下所示：

<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock"></button>

JavaScript:

$(document).ready(function() {
    $("#lock").click(function() {
        var input = $("#input");
        input.prop('disabled',!input.is(':disabled'))
    });
});

示例

相关文章：