0

次のフォームフィールドがあります。ラジオ ボタンを からに(travel_yes/no_##)変更すると、次のテキスト領域が有効になります。いいえに戻す場合は、テキストエリアを再度無効にする必要があります。ID 値が一意であることがわかっているため (テキストエリア フィールドの場所も変更される可能性があります)、パフォーマンスのために、または使用を控えたいと思います。NoYes(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>

ISN'T が機能しない私の 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から番号を取得して、このようにすることができます

$('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 
$("[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() {

    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

これを試してください：

$("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 に答える