根据循环内部选择了哪个无线电按钮，请禁用/启用文本方面

Question

i具有以下表单字段。如果单选按钮(travel_yes/no_##)从No更改为Yes，则应启用以下TextArea (travelDetails_#)。如果他们将其更改为否，则应再次禁用文本。我想远离使用.next()或.find()进行性能的情况

更新：无线电按钮应为每组组，而不是全部在一起

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

Answer 1

我已经在JSFiddle中创建了一些为您服务的东西。我修复了无线电按钮组的名称，因为它们具有相同的名称。

JS：

$(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示例

Answer 2

您可以这样做，从ID中获取数字以找到适当的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/hnnwym/

或将其更改为9

以上的数字

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

to

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

或您可以使用数据attr

$('#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/

Answer 3

这应该做到：

$("input:radio[name=travel]").live('click', function() {
    $('travelDetails_' + $(this).data("travelNumber")).attr('disabled', $(this).val() === 'Yes');
});

单击广播按钮时，获取travelNumber，然后用id='travelDetails_'+travelNumber启用或禁用TextArea，具体取决于数字。

Answer 4

尝试一下：

$("input:radio[name=travel]").live('click', function() {
    f = $(this).attr("id").search("yes");
    i = $(this).attr("id").split("_")[2];
    if(f != -1) {
        $("#travelDetails_" + i).removeAttr('disabled');
    } else {
        $("#travelDetails_" + i).attr("disabled", "true");
    }
});

Answer 5

$("[data-travelNumber]").click(function(){
    var txt = $("#travelDetails_" + $(this).attr("data-travelNumber"));
    if($(this).val() === "Yes")
        txt.removeAttr("disabled");
    else
        txt.attr("disabled", "disabled");
});​    

Answer 6

您可以这样做

live demo

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