如何使用jQuery在单击时禁用/启用输入字段

Question

如何使用jQuery在单击时正确启用/禁用输入字段？

我正在尝试：

$("#FullName").removeAttr('disabled');

以下代码将从输入字段中删除disabled="disabled"：

<input id="FullName" style="width: 299px" value="Marko" disabled="disabled" />

但是如何在点击另一个按钮时重新添加它，或者如何在单击时禁用输入字段？

- Drazek

---

请点击此处查看如何使用jQuery禁用输入框。 - jeremysawesome

Answer 1

对于 jQuery 版本 1.6+，请使用 prop：

$('#elementId').click(function(){
        $('#FullName').prop('disabled', true\false);
});

对于旧版本的jQuery，请使用attr：

$('#elementId').click(function(){
        $('#FullName').attr('disabled', 'disabled'\'');
});

- gdoron is supporting Monica

Answer 2

$("#FullName").prop('disabled', true);

好的。

但请记住，当您禁用它（通过上述代码）后，onclick处理程序将不起作用，因为它已被禁用。要再次启用它，请在另一个按钮或字段的onclick处理程序中添加$("#FullName").removeAttr('disabled');。

- Shiplu Mokaddim

---

谢谢你让第二部分清晰明了。我之前无法弄清楚为什么在文本输入框被禁用时点击事件没有触发。 - decapo

Answer 3

$('#checkbox-id').click(function()
{
    //If checkbox is checked then disable or enable input
    if ($(this).is(':checked'))
    {
        $("#to-enable-input").removeAttr("disabled"); 
        $("#to-disable-input").attr("disabled","disabled");
    }
    //If checkbox is unchecked then disable or enable input
    else
    {
        $("#to-enable-input").removeAttr("disabled"); 
        $("#to-disable-input").attr("disabled","disabled");
    }
});

- songokuhd

Answer 4

另一种简单的启用/禁用输入字段的方法。

$("#anOtherButton").click(function() {
  $("#FullName").attr('disabled', !$("#FullName").attr('disabled'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<input id="FullName" style="width: 299px" value="Marko" disabled="disabled" />
<br>
<br>
<input type="button" id="anOtherButton" value="disable/enable" />

- Rejeesh Prarath

Answer 5

这应该可以做到。

$("#FullName").attr('disabled', 'disabled');

Shiplu 说的没错，但如果你使用的不是 jQuery 1.6+ 版本，请使用这个。

- Brian S

Answer 6

$("#anOtherButton").click(function(){
  $("#FullName").attr('disabled', 'disabled'); 
 });

• .attr（attributeName，value）函数

为匹配元素集设置一个或多个属性

- sll

---

你在第一个选择器 $("anOherButton")... 中忘记了 #，并且有拼写错误。 - gdoron

Answer 7

要在禁用和启用之间切换字段，请尝试以下方法：

$('#toggle_button').click(function () {
    $('#FullName').prop("disabled",

    function (i, val) {
        return !val;
    });
})

- David Hempy