如何基于选项按钮启用和禁用文本框不止一个字段

Question

我发现下面的代码基于选项按钮来启用和禁用文本框，但是我想要20多个这样的字段 。

我想为此编写很多脚本，是否有简单的方法可以创建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

首先，要使代码可重用，请删除任何特定的代码，例如$("#...") 。 而是使用this导航到element。 为此，您可以使用jquery的.siblings函数。

同样也不需要if...else 。 您可以将值设置为true或false以启用/禁用元素。

另外，不要使用name绑定广播上的change ，而是使用选择器的组合来进行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

您可能会喜欢这样，为每个radio / checkbox元素创建一个jQuery对象。 并添加数据属性（在本例中为data-target），在其中为目标输入字段填写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/