當我點擊對應的複選框時，如何讓不可編輯的文本框可編輯

Question

有一個複選框和一個不可編輯的文本框對應於它。當我點擊複選框時，相應的不可編輯文本框應該成爲一個可編輯的文本框。我怎樣才能做到這一點？

Answer 1

此代碼實際上工作正常，並且可以使用。

這是形式的東西：

<form id="myGame" name="myGame" action="" method="post"> 
<input type="radio" name="checkme" id="checkme" onClick="openTheHouse();" >Open Sesame 
<input name="open_id" id="openid" type=text disabled="disabled"> 
</from> 

和腳本：它實際上是相當冷靜，沒有在這個腳本複雜。

<script type="text/javascript"> 
function openTheHouse() 
{ 

if(document.myGame.checkme.checked == true) 
{ 
document.myGame.openid.disabled = false ; 
} 

} 
</script>         

這就是它，全部完成。當然，我相信它的作品。

Answer 2

基本上是：

$('#some-checkbox').click(function() { 
    $('#some-textfield').prop('disabled', !$(this).is(':checked')); 
}); 

現在，你如何去尋找相應的文本框取決於您的標記。一種方法是給文本框添加一個類，該類是複選框的ID。將其應用於所有的複選框可能是這個樣子：

$(':checkbox').click(function() { 
    var box = $(this); 
    $('.' + box.attr('id')).prop('disabled', !box.is(':checked')); 
}); 

否則，文本字段可以由它的位置位於DOM：

<div class="wrapper"> 
    <input type="checkbox"> 
    ... 
    <div> 
     <input type="text" disabled="disabled" /> 
    </div> 
</div> 

然後，您可以這樣做：

$(':checkbox').click(function() { 
    var box = $(this); 
    box.closest('.wrapper').find('input[type=text]').prop('disabled', !box.is(':checked')); 
});