HTML / Javascript：Onclick 启用/禁用输入字段？答案

【问题标题】：HTML / Javascript: On Click Enable/UnDisable Input Fields?HTML / Javascript：Onclick 启用/禁用输入字段？
【发布时间】：2015-09-04 01:42:29
【问题描述】：

我有以下 HTML 输入框：

<form>
<input type="text" name="1" id="1" disabled>
<input type="text" name="2" id="2" disabled>
<input type="text" name="3" id="3" disabled>
<input type="text" name="4" id="4" disabled>
<input type="submit" name="submit" value="submit>
</form>

接下来，我尝试使用 javascript 在用户单击我的 div 时取消禁用我的所有输入框。

JavaScript：

<script>
    $('#edit').click(function(){
        $('input[]').prop('disabled', false);
});
</script>

谁能告诉我哪里出错了，谢谢

【问题讨论】：

您的示例代码中实际上没有 div 或 #edit 元素...
您在示例代码中使用了jquery

标签： javascript html disabled-input

【解决方案1】：

错误是选择器，试试：

 $('input').prop('disabled', false);

【讨论】：

【解决方案2】：

试试这个：

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $('#edit').click(function(){ 
        $("input").prop('disabled', false);
});
});
</script>
<form>
<input type="text" name="1" id="1" disabled>
<input type="text" name="2" id="2" disabled>
<input type="text" name="3" id="3" disabled>
<input type="text" name="4" id="4" disabled>
<input type="submit" name="submit" value="submit">
</form>
<div id="edit">Click to Enable</div>

每当使用jquery编码之前你必须编写$(document).ready(function(){})

【讨论】：

请注意，我看到它在不应该被点击的元素上附加点击事件可能会给使用屏幕阅读器的人带来可用性问题...

【解决方案3】：

查看fiddle

 $('#edit').click(function(){
        $('input').prop('disabled', false);
 });

您还可以使用removeAttr 和attr 来添加和删除禁用

$('input').removeAttr("disabled");
$('input').attr("disabled", true);

【讨论】：

【解决方案4】：

试试这个：

 $('input:text').prop('disabled', false);

或者

 $('input[type=text]').prop('disabled', false);

【讨论】：

最好使用$('input[type=text]')。 cfr jQuery doc

【解决方案5】：

jQuery 1.6+

要更改 disabled 属性，您应该使用 .prop() 函数。

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 及以下

.prop() 函数不存在，但 .attr() 类似：

设置禁用属性。

$("input").attr('disabled','disabled');

要再次启用，正确的方法是使用 .removeAttr()

$("input").removeAttr('disabled');

【讨论】：