jQuery禁用/启用文本区域，具体取决于在循环内选择了哪个单选按钮 [英] jQuery to disable/enable textarea depending on which radio button is selected inside of loop

问题描述

我有以下表单字段.如果单选按钮(travel_yes/no_##)从No更改为Yes，则应启用以下文本区域(travelDetails_#).如果他们将其更改回否"，则应再次禁用文本区域.我想避免使用.next()或.find()来提高性能，因为我知道我的ID值将是唯一的(而且textarea字段的位置可能会发生变化).

I have the following form fields. If the radio button (travel_yes/no_##) is changed from No to Yes, then the following textarea (travelDetails_#) should become enabled. If they change it back to No, then the textarea should be disabled again. I'd like to stay away from using .next() or .find() for performance since I know my ID values will be unique (also the location of the textarea fields may change).

已更新:广播按钮应该按组分组，而不是全部分组

<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代码.

Here is my jQuery code that ISN'T working.

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

推荐答案

您可以这样做，从id中提取数字以找到合适的文本区域

You can do it like this taking the number from the id to find the appropriate textarea

$('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，则将其更改为此

or change it to this if you ever have numbers over 9

$('#travelDetails_' + this.id.slice(-1))

到

$('#travelDetails_' + this.id.split('_')[2])

或者您可以使用数据属性

Or you can use your data attr

$('#travelDetails_' + $(this).attr('data-travelNumber'))

您可以使用相同的方法来停止遍历dom

You can use the same methodology to stop from traversing the 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/

这篇关于jQuery禁用/启用文本区域，具体取决于在循环内选择了哪个单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！