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

Question

我有根据用户选择显示和隐藏的输入字段。默认情况下，所有输入字段(文本框和文本区域)都将被禁用，并且在用户选择"是"之前不会显示。切换为隐藏的输入字段将立即被禁用。

我的代码的问题是，当您对两个问题都选择"是"，然后对其中一个问题选择"否"时，所有显示或隐藏的文本区域都将被禁用，而不仅仅是隐藏的文本区。

下面是代码片段。

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

<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 1

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

但是，您需要仅针对子代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>