除非选中复选框，否则禁止在文本框中输入文本

Question

我试图阻止在文本框中输入文字，除非选中与文本框对应的复选框。

// Validate "Other" textbox
var isOther = document.getElementById("isOther");
isOther.addEventListener("input", function (evt) {
     // Checkbox must be checked before data can be entered into textbox
     if (isOther.checked) {
          document.getElementById("other").disabled = false;
     } else {
          document.getElementById("other").disabled = true;
     }
});

Answer 1

请勿使用disabled。而是使用readonly。在文档加载期间，取消选中并禁用输入：

<input type="checkbox" id="isOther" />
<input type="text" id="other" readonly />

并使用此脚本。

// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
    other.readOnly = !isOther.checked;
});
other.addEventListener("focus", function (evt) {
     // Checkbox must be checked before data can be entered into textbox
    other.readOnly = !isOther.checked;
});

更长的版本。

// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
     if (isOther.checked) {
          other.readOnly = false;
     } else {
          other.readOnly = true;
     }
});
other.addEventListener("focus", function (evt) {
     // Checkbox must be checked before data can be entered into textbox
     if (isOther.checked) {
          this.readOnly = false;
     } else {
          this.readOnly = true;
     }
});

小提琴：http://jsfiddle.net/praveenscience/zQQZ9/1/

小提琴：http://jsfiddle.net/praveenscience/zQQZ9/

Answer 2

我的解决方案使用jQuery库。这是一个小提琴：http://jsfiddle.net/8LZNa/

基本上我在页面加载时禁用输入：

<input name="isOther" type="checkbox" id="isOther" /><br />
<input type="text" id="other" disabled/>

...当其他更改时，它将确保检查它，并将状态更改为启用。或者改回禁用状态。

$('input[name=isOther]').change(function(){
    if($(this).is(':checked')) {
        $("#other").removeAttr('disabled');
    }
    else{
       $("#other").attr('disabled','disabled');
    }    
});

Answer 3

你可以这样做：

document.getElementById( 'isOther' ).onChange = function(){
    document.getElementById("other").disabled = !this.checked;
};

Answer 4

不使用jQuery或禁用属性：

<强> HTML

<input type="checkbox" id="x" value="Enable textbox" onclick="test(this);" />
<input type="text" id="y" readonly />

<强> JAVASCRIPT

function test(checkbox) {
    if(checkbox.checked) {
        document.getElementById('y').readOnly = false;
    }
    else {
        document.getElementById('y').readOnly = true;
    }
}