Question

我根据选项按钮找到了启用和禁用文本框的以下代码，但我想要超过 20个字段。

我想为此编写很多脚本，是否可以轻松创建20个字段

请任何人帮我解决这个问题

＆＃13;

$(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();
  });
}); //]]>

＆＃13;

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

＆＃13;

Answer 1

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

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

此外，不是使用change在广播中绑定name，而是使用选择器的组合，因为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或classname。在这种情况下，您不需要将它们作为兄弟姐妹。

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/

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

2 个答案: