根据在循环中选择的单选按钮禁用/启用textarea的jQuery
根据在循环中选择的单选按钮禁用/启用textarea的jQuery
提问于 2012-12-21 15:30:17
我有以下表单字段。如果单选按钮(travel_yes/no_##)从No更改为Yes，则应启用以下文本区域(travelDetails_#)。如果将其更改为“否”，则应再次禁用文本区域。我不想使用.next()或.find()来提高性能，因为我知道我的ID值是唯一的( textarea字段的位置可能会改变)。
更新:单选按钮应该是每组的组，而不是所有的
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel1" data-travelNumber="1" id="travel_yes_1" value="Yes" tabindex="25" >
Yes
</label>
<label class="radio inline">
<input name="travel1" type="radio" data-travelNumber="1" id="travel_no_1" value="No" tabindex="26" checked >
No
</label>
</div>
<div class="controls">
<textarea name="travelDetails" id="travelDetails_1" ></textarea>
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel2" data-travelNumber="2" id="travel_yes_2" value="Yes" tabindex="25" >
Yes
</label>
<label class="radio inline">
<input name="travel2" type="radio" data-travelNumber="2" id="travel_no_2" value="No" tabindex="26" checked >
No
</label>
</div>
<div class="controls">
<textarea name="travelDetails" id="travelDetails_2"></textarea>
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel3" data-travelNumber="3" id="travel_yes_3" value="Yes" tabindex="25" >
Yes
</label>
<label class="radio inline">
<input name="travel3" type="radio" data-travelNumber="3" id="travel_no_3" value="No" tabindex="26" checked >
No
</label>
</div>
<div class="controls">
<textarea name="travelDetails" id="travelDetails_3"></textarea>
</div>下面是我的jQuery代码，它不起作用。
$("[data-travelNumber]").each(function() {
var $this = $(this), limit = +$(this).data("travelNumber");
$("input:radio[name=travel]:checked").live('click',function(){
if ( $(this).val() === 'Yes' )
$('#travelDetails_' + limit).removeAttr('disabled');
else
$('#travelDetails_' + limit).attr("disabled", "enabled");
});
});
});回答 6
Stack Overflow用户
回答已采纳
发布于 2012-12-21 15:43:52
您可以这样做，使用id中的数字来找到适当的文本区域。
$('input[type=radio]').change(function(){
var $p = $(this).closest('.controls');
var $checked = $p.find(':checked');
$('#travelDetails_' + this.id.slice(-1)).prop('disabled',$checked.val() == 'No');
}).change();http://jsfiddle.net/hnwYM/
如果您的数字超过9，则将其更改为此。
$('#travelDetails_' + this.id.slice(-1))至
$('#travelDetails_' + this.id.split('_')[2])或者您可以使用您的数据攻击。
$('#travelDetails_' + $(this).attr('data-travelNumber'))您可以使用相同的方法来停止遍历dom。
$('input[type=radio]').change(function(){
var num = $(this).attr('data-travelNumber');
var $checked = $('input[id$=_' + num + ']:checked');
$('#travelDetails_' + num).prop('disabled',$checked.val() == 'No');
}).change();http://jsfiddle.net/U9Ywe/
Stack Overflow用户
发布于 2012-12-21 15:50:34
我在JsFiddle中创建了一些东西，为您提供了一些有用的东西。我修正了单选按钮组名，因为它们都有相同的名称。
联署材料：
$(document).ready(function() {
// disable all the textarea on start
$("textarea").attr("disabled", true);
$("input[type=radio]").change(function() {
var id = $(this).attr("id").split("_");
id = id[id.length-1];
// or use your data-travelNumber attribute
// id = $(this).data('travelNumber');
$("#travelDetails_" + id).attr("disabled", !($(this).val() == "Yes"));
});
});下面是示例：JsFiddle实例
Stack Overflow用户
发布于 2012-12-21 15:39:52
你可以这样做
现场演示
$("input:radio[name^=travel]").live('click', function() {
idparts = this.id.split('_');
textArea = document.getElementById('travelDetails_' + idparts[idparts.length - 1]);
if (this.value === 'Yes')
textArea.disabled = true;
else
textArea.disabled = false;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13992834
复制相关文章
相似问题
腾讯云开发者
