javascript - 対応するチェックボックスをクリックすると、編集不可のテキストボックスを編集可能にする方法

Question

1 つのチェック ボックスとそれに対応する編集不可のテキスト ボックスがあります。チェックボックスをクリックすると、対応する編集不可能なテキストボックスが編集可能なテキストボックスになるはずです。どうすればこれを達成できますか？

Answer 1

基本的：

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

対応するテキスト ボックスを見つける方法は、マークアップによって異なります。1 つの方法は、テキスト ボックスにチェックボックスの 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'));
});

Answer 2

このコードは実際に問題なく動作し、すぐに使用できます。

これはフォームのものです：

<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>                                  

以上です。確かに私はそれがうまくいくと信じています。