0

我有以下表单字段。如果单选按钮(travel_yes/no_##)从 更改No为，则应启用Yes以下文本区域。(travelDetails_#)如果他们将其更改回否，则应该再次禁用 textarea。我想远离使用.next()或.find()性能，因为我知道我的 ID 值将是唯一的（文本区域字段的位置也可能会改变）。

更新：单选按钮应该是一组，而不是全部在一起

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

6 回答 6

3

我在 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 示例

于 2012-12-21T15:50:34.703 回答
1

您可以这样做，从 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/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/

于 2012-12-21T15:43:52.437 回答
0

你可以这样做

现场演示

$("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;
});​
于 2012-12-21T15:39:52.257 回答
0 
$("[data-travelNumber]").click(function(){
    var txt = $("#travelDetails_" + $(this).attr("data-travelNumber"));
    if($(this).val() === "Yes")
        txt.removeAttr("disabled");
    else
        txt.attr("disabled", "disabled");
});​
于 2012-12-21T15:45:01.887 回答
0

这应该这样做：

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

单击单选按钮时，获取它travelNumber，然后使用 启用或禁用文本区域id='travelDetails_'+travelNumber，具体取决于数字。

于 2012-12-21T15:45:45.553 回答
0

试试这个：

$("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");
    }
});
于 2012-12-21T15:49:46.057 回答