啓用和禁用複選框文本輸入選中和未選中

我需要的是使文本輸入時，我選中複選框，並禁用文本輸入時，我取消選中該複選框

我正在使用下面的代碼，但是在選中時禁用/禁用時會進行反向啓用，因此如何調整它以適合我的需要。

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

任何幫助〜謝謝

來源

2013-02-28 Reham Fahmy

你只需要在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-28 16:11:35

你也應該觸發這個onload事件或標記添加正確的默認屬性。 – David 2013-02-28 16:13:08

是的，它完成了:-) – 2013-02-28 16:15:20

作品完美〜非常感謝 – 2013-02-28 16:22:00

一個jQuery的解決方案可能是這一個：

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

這是一樣的Minko的答案，但我發現它更優雅。

來源

2013-02-28 16:17:14 Rayfloyd

-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-09 08:34:06

一個更好的解決辦法是：

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-22 16:16:52

啓用和禁用複選框文本輸入選中和未選中

回答

相關問題