web-dev-qa-db-ja.com

ラジオボタンに基づいてjqueryがテキストボックスを有効/無効にする

私のページ（jsp）には、ラジオボタングループとテキストボックス（最初は無効になっています）があります。

  • ユーザーがラジオボタンをクリックするたびに、テキストボックスが有効になります。
  • ユーザーが他のラジオボタンをクリックすると、テキストボックスが再び無効になります。

以下のコードで、最初は無効にしたチェックボックスを有効にできます。

$("#DevGroup_OTHER").click(function(){          
    $("#otherDevText").attr("disabled","");
})

私の質問：

  • しかし、どうすればテキストボックスを再び無効にできますか？
  • JQueryを使用したより簡単なソリューションはありますか？

よろしく

jquerycheckboxradio-button
13
sangram

（すべてのラジオボタンに対して）常に無効にし、ラジオボタンがテキストボックスを有効にするものである場合は、再度有効にします。ユーザーが1980年に製造されたマシンを使用している場合を除いて、それは非常に高速になるでしょう。

$('radio').click(function() { 
    $("#otherDevText").prop("disabled",true);
    if($(this).attr('id') == 'enable_textbox') {
        $("#otherDevText").prop("disabled",false);
    }
});

または、テキストボックスを有効にするラジオボタンが複数ある場合：

$('input:radio').click(function() { 
  $("#otherDevText").prop("disabled",true);
  if($(this).hasClass('enable_tb')) {
      $("#otherDevText").prop("disabled",false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="DevGroup_OTHER">
  <input type="radio" id="d1" name="r1" value="d1">dev1 <br /> 
  <input type="radio" id="d2" name="r1" value="d2">dev2 <br/> 
  <input type="radio" id="d3" name="r1" value="d3" class="enable_tb"> enable
</fieldset>
<br />
<input id="otherDevText" name="tb1" disabled="disabled"
       value="some Textbox value" type="text">

理にかなっていますか？

33
KyleFarris
$("#some_other_radiobutton").click(function(){
  $("#otherDevText").attr("disabled","disabled");
});
7
Andy Gaskell