もっとその後、一つのフィールドを有効にし、オプションボタンに基づいて無効にテキストボックス方法

Question

私は、オプションボタンに基づいてテキストボックスを有効または無効にに以下のコードを見つけましたが、私はより多く20フィールドようなにしたいです。

私は、それが

は、いずれかがこの

$(window).load(function() { 
 
    $(function() { 
 
    window.invalidate_input = function() { 
 
     if ($('input[name=opt13]:checked').val() == "Yes") 
 
     $('#others').removeAttr('disabled'); 
 
     else 
 
     $('#others').attr('disabled', 'disabled'); 
 
    }; 
 

 
    $("input[name=opt13]").change(invalidate_input); 
 

 
    invalidate_input(); 
 
    }); 
 
}); //]]>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script> 
 
<label>Did you study any school</label>&nbsp&nbsp 
 
<input type='radio' name='opt13' value='Yes' id="" />Yes 
 
<input type='radio' name='opt13' value='No' id="" />Others</td> 
 
<br /> 
 
<br /> 
 
<label>Enter MatexBranch:</label>&nbsp;&nbsp; 
 
<input type="textbox" name="others" id="others" />

Answer 1

まずに関する私を助けてくださいのような20個のフィールドを作成する簡単な方法があり、そのためのスクリプトをたくさん書きたいですコードを再利用可能にするには、$("#...")のような特定のコードを削除してください。代わりに、thisを使用して要素に移動します。このために、.siblings jqueryの関数を使用することができます。

if...elseも必要ありません。値をtrueまたはfalseに設定して、要素を有効または無効にすることができます。

nameを使用してラジオでchangeをバインドする代わりに、グループごとに異なるnameというセレクタの組み合わせを使用してください。

$(function() { 
 
    var invalidate_input = function() { 
 
    $(this).siblings('.input-value').attr('disabled', $(this).val() !== "Yes"); 
 
    }; 
 

 
    $(".section input[type='radio']").on("change", invalidate_input); 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script> 
 

 
<div class="section"> 
 
    <label>Did you study any school</label>&nbsp&nbsp 
 
    <input type='radio' name='opt13' value='Yes' id="" />Yes 
 
    <input type='radio' name='opt13' value='No' id="" />Others</td> 
 
    <br /> 
 
    <br /> 
 
    <label>Enter MatexBranch:</label>&nbsp;&nbsp; 
 
    <input type="textbox" name="others" class="input-value" /> 
 
</div> 
 

 
<div class="section"> 
 
    <label>Did you study any school</label>&nbsp&nbsp 
 
    <input type='radio' name='opt14' value='Yes' id="" />Yes 
 
    <input type='radio' name='opt14' value='No' id="" />Others</td> 
 
    <br /> 
 
    <br /> 
 
    <label>Enter MatexBranch:</label>&nbsp;&nbsp; 
 
    <input type="textbox" name="others" class="input-value" /> 
 
</div>

Answer 2

あなたは、各ラジオ/チェックボックス要素のjQueryオブジェクトを作成し、これを好きでした。また、ターゲット入力フィールドのIDまたはクラス名を記入するデータ属性（この場合はデータターゲット）を追加します。この場合、それらを兄弟として持つ必要はありません。ここで働く

var toggleInput = { 
    init: function() { 
     var $toggles = $('.js-toggle-input'); 

     $toggles.each(function(index, elem) { 
       var $elem = $(elem); 

       $elem.on('change', function(e) { 
        var currentTarget = $(e.currentTarget); 
        var targetInputField = currentTarget.data('target'); 

        if (currentTarget.is(':checked') && currentTarget.val() == "Yes") { 
         $(targetInputField).remoeAttr('disabled'); 
        } else { 
         $(targetInputField).attr('disabled', 'disabled'); 
        } 
       }); 
     }); 
    } 
} 

$(function() { 
    toggleInput.init(); 
}); 

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script> 
<label>Did you study any school </label> &nbsp&nbsp 
<input type='radio' name='opt13' value='Yes' id="" class="js-toggle-input" data-target="#others"/>Yes 
<input type='radio' name='opt13' value='No' id="" class="js-toggle-input" data-target="#others"/>Others</td> 
<br /><br /> 
<label>Enter MatexBranch: </label> &nbsp;&nbsp; 
<input type="textbox" name="others" id="others" /> 

： https://jsfiddle.net/djr9g0dc/2/