如何根据选中哪个无线电按钮启用/禁用某个文本框？

Question

我有3个无线电按钮和一个文本框(也有3个文本框)，如下所示：

<input type = "radio" id = "myRadio" value = "A" checked = "checked"/>
<input type = "text" id = "myText1"/> <br/>

<input type = "radio" id = "myRadio" value = "B" />
<input type = "text" id = "myText2"/><br/>

<input type = "radio" id = "myRadio" value = "C" />
<input type = "text" id = "myText2"/>

默认情况下，第一个radioButton是选中的，它旁边的文本框应该是启用的。其他两个无线电按钮是未选中的，它们旁边的文本框应该是禁用的。

我需要一个Jquery脚本，以便：

1. 选中无线电按钮时，应启用它旁边的文本框。
2. 未选中的无线电按钮旁边的文本框仍然是禁用的。

换句话说，只有选中的无线电按钮旁边的文本框才启用。

就个人而言，我很难编写脚本，因为所有的无线电按钮都有相同的id.。

我已经尝试过了，但是我同时检查了所有的两个无线电按钮，而只有第一个文本框仍然处于启用状态。

$(":text").attr("disabled", "disabled");
if($(":radio").attr("checked"))
{
  $(":radio:checked + :text").removeAttr("disabled", "disabled");
};

编辑

看看上面的代码。当页面第一次加载时，将选中第一个无线电按钮(其值= "A")，因此应该启用它旁边的文本框( id = "myText1")。当用户单击不同的无线电按钮(例如，具有值= "B" )的按钮时，应该启用它旁边的文本框(其id = "myText2")，依此类推。

我希望这次我能说得更清楚些。

顺便说一下，我使用的是ASP.NET MVC。

谢谢你的帮助

Answer 1

你不应该需要一个插件。根据James的代码进行调整，以下内容应该可以工作(并将正确禁用加载时的框)：

$(function() {
    $('input[type=radio]').change(function()
       {
           if ($(this).is(':checked')) {
               $('input[type=text]').attr('disabled', 'disabled');
               $(this).next().removeAttr('disabled');
           }
       });

    $('input[type=radio]:first').attr('checked', 'checked').change();
});

Answer 2

$("input[type='radio']).checked(function()
   {
       $("input[type='text']").disable();
       $(this).next().enabled();
   });

这需要一个插件来处理启用/禁用(由于一些奇怪的原因，它不在核心jQuery libray中)，那里 是 许多和易于google使用。

Answer 3

Enabling and disabling sections/div's based on Selection.
/**Sample function to disable and enable sections**/
function onChnageFunction(strSelect) {
if( strSelect == "CP")
{
$('#field1Name').removeAttr('disabled');
$('#field2Name').removeAttr('disabled');
}
else
{
//Defaulting before disabling
$('#field1Name').val("0");
$('#field2Name').val("0");
$('#field1Name').attr('disabled', 'disabled');
$('#field2Name').attr('disabled', 'disabled');
}
}

/*On change attachment*/
$(document).on('change', '[name="selectComponentname"]', function () {
var strSelect = $(this).val();
/*calling helper for logic implementation*/
onChnageFunction(strSelect);
});

/*On load attachment*/
$(document).ready(function() {
var strSelect = $("#selectComponentname").val();
//calling helper for logic implementation
onChnageFunction(strSelect);    
});