Question

我正在尝试创建一个禁用文本字段加载的表单，如果用户想要输入此字段，则必须单击复选框。我现在有这个。

然而，如果文本框下方的内容已启用并勾选，则复选框将禁用它。如何进行修改以使其相反。即，首先禁用文本框，然后单击复选框启用它？

Javascript代码

$(document).ready(function () {
            $('#testcheckbox').change(function() {
                $('#testtextfield').attr('disabled', this.checked);
            });
        });

HTML代码

<input type="checkbox" id="testcheckbox" />
<input type="text" id="testtextfield" />

感谢。

Answer 1

尝试使用此设置：

<input type="checkbox" id="testcheckbox" />
<input type="text" id="testtextfield" disabled="disabled" />

$(document).ready(function () {
    $('#testcheckbox').change(function() {
        $('#testtextfield').prop('disabled', !this.checked);
    });
});

http://jsfiddle.net/93HJ3/

在这种情况下，文本框默认为disabled。然后，当单击该复选框时，文本框将根据其反转的checked属性被禁用，以获得您想要的相反行为。

如果你看一下http://api.jquery.com/prop/，你会发现jQuery方法更容易被改变元素的属性，如“禁用”，“只读”，“检查”等。并且有一个很好的讨论差异：.prop() vs .attr()。但是，如果您需要更改属性或属性，这取决于您，因为它们具有不同的含义。

Answer 2

如果您不想使用jQuery，则等效于纯JavaScript。

<input type="text" id="inputbox" diasbled="disabled" />

var inputbox = document.getElementById('inputbox');

document.addEventListener('DOMContentLoaded',function(){
    inputbox.removeAttribute('disabled');
});

Javascript启用已禁用的文本框

2 个答案: