1

グループに 4 つのラジオ ボタンがあり、たとえば 1,2,3,4 であり、radiobutton1 に加えて、さらに 2 つの入力テキスト ボックスがあります。radiobutton1を選択すると、これらのテキスト ボックスが有効になりますが、ラジオ ボタン 2、3、4を選択すると、テキスト ボックスが無効になります。ラジオ ボタン 2、3、4を選択してテキスト ボックスを無効にした後、radiobutton1 を選択すると、テキスト ボックスが再び有効になります。デフォルトでは (最初のページ読み込み時)、ラジオボタン 1 が選択され、テキストボックスが有効になっています

これは、Razor ビュー エンジンを使用して MVC3 で記述された HTML コードです。

@Html.RadioButtonFor(m => m.Search, "rb1", new { Checked = "true", id = "1" })radio 1 
<td>@Html.TextBoxFor(m => m.textbox1, new { style = "width:11%" })
<td>@Html.TextBoxFor(m => m.textbox2, new { style = "width:11%" })
@Html.RadioButtonFor(m => m.Search, "rb2", new { id = "2" })radio 2
@Html.RadioButtonFor(m => m.Search, "rb3", new { id = "3" })radio 3
@Html.RadioButtonFor(m => m.Search, "rb4", new { id = "4" })radio 4

最小限のコード行で jquery を使用してこれを行う必要があります。助言がありますか？

4

3 に答える 3

3 
     $("#r1").click(function () {
                $(".myText").attr("disabled", false);
            });

            $(".disableText").click(function () {
                $(".myText").attr("disabled", true);
            });

HTML:

<input type="radio" name="r" id="r1"  />
<input type="radio" name="r" id="r2"  class="disableText" />
<input type="radio" name="r" id="r3"  class="disableText" />
<input type="radio" name="r" id="r4"  class="disableText" />
<input type="text" id="t1" class="myText" disabled="disabled" />
<input type="text" id="t2"  class="myText" disabled="disabled"  />
于 2012-09-14T07:10:37.167 に答える
1

jQuery

$('input[type="radio"]').click(function() {
    if($(this).index() == 0) {
        $('input[type="text"]').removeAttr('disabled');
    } else {
        $('input[type="text"]').prop('disabled', 'disabled');
    }
});

HTML

<input type="radio" name="group" />
<input type="radio" name="group" />
<input type="radio" name="group" />
<input type="radio" name="group" />

<input type="text" disabled="disabled" />
<input type="text" disabled="disabled" />
于 2012-09-14T07:53:00.167 に答える
0

HTML

<div id="radioContainer">
    <input type="radio" name="r" id="r1" />
    <input type="text" id="t1" disabled="disabled" />
    <input type="text" id="t2"  disabled="disabled"  /><br />
    <input type="radio" name="r" id="r2" />
    <input type="radio" name="r" id="r3" />
    <input type="radio" name="r" id="r4" />
<div>

js

// only one handler is attached to DOM
$("#radioContainer").click(function(e){
    var $t = $(e.target), $inputs = $(this).find('input');
    if( $t.is('input[name="radios"]') )
        $inputs.filter('[type="text"]').get(0).disabled = ($t.attr('id') == 'r1' ? false:true);
    });
于 2012-09-14T08:13:43.093 に答える