1

我在一个组中有 4 个单选按钮，例如 1、2、3、4，并且与 radiobutton1 一起还有两个输入文本框。当我选择radiobutton1时，这些文本框被启用，但在选择单选按钮 2、3、4时——文本框被禁用。选择单选按钮 2、3、4并禁用文本框后，如果我选择返回单选按钮 1，则应再次启用文本框。默认情况下（在第一次加载页面时），选择单选按钮 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 回答