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

【问题标题】：Enabling/Disabling of Text Box on click of different Radio Buttons using jQuery使用 jQuery 单击不同的单选按钮时启用/禁用文本框
【发布时间】：2012-09-14 06:59:17
【问题描述】：

我在一个组中有 4 个单选按钮，比如 1、2、3、4，并且与 radiobutton1 一起还有两个输入文本框。当我选择 radiobutton1 时，这些文本框被启用，但在选择 radio button 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 来做到这一点。有什么建议吗？

【问题讨论】：

如果可以在解析后显示标记会容易得多
实际上我是这个网站的新手，所以不知道你们如何发布 HTML、JS 代码，否则我计划上传现有屏幕的屏幕截图，但我无法这样做:(
在浏览器中查看页面并查看源代码，然后将其粘贴到此处
@user1053902 请参阅此链接以获取有关发布代码的指南。 meta.stackexchange.com/questions/22186/…
我在这里上传了我的视图页面和 JS jsfiddle.net/pushkar_ravi/mLsC2/1 请告诉我怎么做。

标签： jquery asp.net-mvc-3

【解决方案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"  />

【讨论】：

我已经修改了我的问题，如果您可以重新访问并回答它.. 真的很棒。提前致谢。

【解决方案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" />

【讨论】：

【解决方案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>

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

【讨论】：