Question

我根据用户的选择显示和隐藏输入字段。默认情况下，所有输入字段（文本框和texarea）都被禁用，直到用户选择“是”才会显示。切换为隐藏的输入字段将立即被禁用。

关于我的代码的问题是，当您为这两个问题选择“是”时，稍后为其中一个问题选择“否”，则禁用所有显示或隐藏的文本，而不是仅隐藏的文本。

以下是代码段。

＆＃13;

$(function() {

  //Question 1
  toggle('input[name=first]', '#language');
  //Question 2
  toggle('input[name=second]', '#comment');

  function toggle(button, wrapper) {
    $(button).change(function(event) {
      $(wrapper).toggle('slow');
      if ($(this).val() == 'Yes') {
        $(wrapper + ' input, textarea').prop('disabled', false);
      } else if ($(this).val() == 'No') {
        $(wrapper + ' input, textarea').prop('disabled', true);
      }
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="first">
    <div class="form-group row">
      <label class="control-label">1.Have you programmed before?</label>
      <label class="radio-inline">
        <input type="radio" name="first" value="Yes">Yes
      </label>
      <label class="radio-inline">
        <input type="radio" name="first" value="No" checked>No
      </label>
    </div>
    <div id="language" style="display:none;">
      <input type="text" class="form-control" placeholder="Language" disabled>
      <br>
      <textarea name="experience" rows="4" class="form-control" placeholder="Experience" disabled></textarea>
    </div>
  </div>

  <div id="second">
    <div class="form-group row">
      <label class="control-label">2.Will you like to leave a comment?</label>
      <label class="radio-inline">
        <input type="radio" name="second" value="Yes">Yes
      </label>
      <label class="radio-inline">
        <input type="radio" name="second" value="No" checked>No
      </label>
    </div>
    <div id="comment" style="display:none;">
      <textarea name="comment" rows="4" class="form-control" disabled></textarea>
    </div>
  </div>
</div>

＆＃13;

Answer 1

问题区域选择器$(wrapper + ' input, textarea')不正确，它正在选择input的后代wrapper和所有textarea。

但是，您只需定位后代input和textarea。所以你可以使用.find()

$(wrapper).find('input, textarea')

或创建有效的多选择器字符串文字。

$(wrapper + ' input, ' + wrapper +' textarea')

$(function() {

  //Question 1
  toggle('input[name=first]', '#language');
  //Question 2
  toggle('input[name=second]', '#comment');

  function toggle(button, wrapper) {
    $(button).change(function(event) {
      $(wrapper).toggle('slow');
      if ($(this).val() == 'Yes') {
        $(wrapper).find('input, textarea').prop('disabled', false);
      } else if ($(this).val() == 'No') {
        $(wrapper).find('input, textarea').prop('disabled', true);
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="first">
    <div class="form-group row">
      <label class="control-label">1.Have you programmed before?</label>
      <label class="radio-inline">
        <input type="radio" name="first" value="Yes">Yes
      </label>
      <label class="radio-inline">
        <input type="radio" name="first" value="No" checked>No
      </label>
    </div>
    <div id="language" style="display:none;">
      <input type="text" class="form-control" placeholder="Language" disabled>
      <br>
      <textarea name="experience" rows="4" class="form-control" placeholder="Experience" disabled></textarea>
    </div>
  </div>

  <div id="second">
    <div class="form-group row">
      <label class="control-label">2.Will you like to leave a comment?</label>
      <label class="radio-inline">
        <input type="radio" name="second" value="Yes">Yes
      </label>
      <label class="radio-inline">
        <input type="radio" name="second" value="No" checked>No
      </label>
    </div>
    <div id="comment" style="display:none;">
      <textarea name="comment" rows="4" class="form-control" disabled></textarea>
    </div>
  </div>
</div>

Answer 2

你的代码太复杂了。

看看这个

$(function() {
  $("[type=radio]").click(function(event) {
    var $wrapper = $(this).closest("div").next();
    $wrapper.toggle('slow');
    $('input, textarea',$wrapper ).prop('disabled', $(this).val() == 'No');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="first">
    <div class="form-group row">
      <label class="control-label">1.Have you programmed before?</label>
      <label class="radio-inline">
        <input type="radio" name="first" value="Yes">Yes
      </label>
      <label class="radio-inline">
        <input type="radio" name="first" value="No" checked>No
      </label>
    </div>
    <div id="language" style="display:none;">
      <input type="text" class="form-control" placeholder="Language" disabled>
      <br>
      <textarea name="experience" rows="4" class="form-control" placeholder="Experience" disabled></textarea>
    </div>
  </div>

  <div id="second">
    <div class="form-group row">
      <label class="control-label">2.Will you like to leave a comment?</label>
      <label class="radio-inline">
        <input type="radio" name="second" value="Yes">Yes
      </label>
      <label class="radio-inline">
        <input type="radio" name="second" value="No" checked>No
      </label>
    </div>
    <div id="comment" style="display:none;">
      <textarea name="comment" rows="4" class="form-control" disabled></textarea>
    </div>
  </div>
</div>

jQuery后代选择器选择了祖先之外的元素

2 个答案: