如何根据选项按钮启用和禁用文本框多于一个字段答案

【问题标题】：How to enable and disable textbox based on option button More then one field如何根据选项按钮启用和禁用文本框多于一个字段
【发布时间】：2017-02-02 15:00:56
【问题描述】：

我找到了下面的代码来启用和禁用基于选项按钮的文本框，但我想要超过 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" />

【问题讨论】：

首先这不是一个好方法。 window.load 有 $(function(){})。为什么...
for 或 foreach 或 $.each 或者如果您对变量进行参数化，则可以使用多种迭代变量的方法中的任何一种。如果这是一个带有验证和条件格式的相当长/复杂的表单，也许看看这个question about generating forms based off JSON or XML
@haxxxton 最好使用更通用的代码并使用this 来查找要操作的元素。
@Rajesh，我对“字段LIKE this”的含义的误解，而不是相同的，除了name.. 我认为他们想要一个更强大的表单构建提供特定于 html 结构的解决方案。

标签： javascript jquery

【解决方案1】：

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

也不需要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>

【讨论】：

【解决方案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/

【讨论】：