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

时间:2012-03-10 20:24:09

标签: javascript jquery

如何使用jQuery正确启用/禁用点击输入字段?

我正在尝试:

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

从此输入字段中删除disabled="disabled"

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

但是如何通过点击另一个按钮再次添加它或如何在点击时禁用输入字段?

7 个答案:

答案 0 :(得分:23)

对于jQuery版本1.6+,请使用prop

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

对于旧版本的jQuery,请使用attr

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

答案 1 :(得分:5)

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

会这样做。

但是在禁用它之后请记住(通过上面的代码)onclick处理程序不会作为其禁用。要再次启用它,请在另一个按钮或字段的$("#FullName").removeAttr('disabled');处理程序中添加onclick

答案 2 :(得分:4)

$('#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");
    }
});

答案 3 :(得分:2)

启用/禁用输入feild的另一种简单方法

&#13;
&#13;
$("#anOtherButton").click(function() {
  $("#FullName").attr('disabled', !$("#FullName").attr('disabled'));
});
&#13;
<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" />
&#13;
&#13;
&#13;

答案 4 :(得分:1)

这应该这样做。

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

Shiplu是正确的,但是如果你没有使用jquery 1.6 +

,请使用它

答案 5 :(得分:1)

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

答案 6 :(得分:0)

要在禁用和启用之间切换字段,请尝试以下操作:

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

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