Question

我在一组中有4个单选按钮，比如1,2,3,4和radiobutton1，还有两个输入文本框。当我选择 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来完成此操作。有什么建议吗？

Answer 1

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

Answer 2

<强>的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" />

Answer 3

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

使用jQuery单击不同的单选按钮启用/禁用文本框

3 个答案: