6

我有复选框和文本输入

我需要的是在我选中复选框时启用文本输入,并在我取消选中复选框时禁用文本输入

我正在使用以下代码,但它在未选中时执行反向启用/在选中时禁用,因此如何根据我的需要进行调整。

<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').enabled = this.checked;
};
</script>

任何帮助〜谢谢

4

5 回答 5

40

您只需要!this.checked.

这是一个显示更改的示例:

document.getElementById('yourBox').onchange = function() {
    document.getElementById('yourText').disabled = !this.checked;
};
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />

于 2013-02-28T16:11:35.540 回答
4

一个 jQuery 解决方案可能是这样的:

<script>
$('#yourBox').change(function() {
    $('yourText').attr('disabled',!this.checked)
});
</script>

这与 Minko 的答案相同,但我觉得它更优雅。

于 2013-02-28T16:17:14.870 回答
1

尝试一下。如果您使用标签,则将 onmousedown 添加到它

<form >
  <input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" onmousedown="this.form.yourText.disabled=this.checked"/>
 </form>

于 2020-02-02T19:17:54.697 回答
0

更好的解决方案可能是:

var checkbox = document.querySelector("#yourBox");
var input = document.querySelector("#yourText");

var toogleInput = function(e){
  input.disabled = !e.target.checked;
};

toogleInput({target: checkbox});
checkbox.addEventListener("change", toogleInput);
<input type="checkbox" id="yourBox">
<input type="text" id="yourText">

于 2017-11-22T16:16:52.513 回答
-1

function createInput( chck ) {
    if( jQuery(chck).is(':checked') ) {
        jQuery('<input>', {
            type:"text",
            "name":"meta_enter[]",
            "class":"meta_enter"
        }).appendTo('p.checkable_options');
    }
    else {
        jQuery("input.meta_enter").attr('disabled','disabled');
    }        
}
createInput( chck );
<input type="radio" name="checkable" class="checkable" value="3" />
<input type="radio" name="checkable" class="checkable" value="4" onclick="createInput(this)" />

于 2016-02-09T08:34:06.150 回答