Question

我有3个radiobuttons和一个文本框，彼此相邻（也是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 已选中，旁边的文本框应启用。其他2个单选按钮未选中，其旁边的文本框应禁用。

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

选中radiobutton时，应启用其旁边的文本框
未选中的radiobutton旁边的文本框保持禁用状态

换句话说，只启用了已选中的单选按钮旁边的文本框。

就个人而言，我编写脚本很困难，因为所有的radiobutton都有相同的ID。

我试过这个，但我同时检查了所有2个单选按钮，而只有第一个文本框保持启用状态。

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

修改

查看上面的代码。第一次加载页面时，会检查第一个radiobutton（ value =“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库中），其中there are many并且易于谷歌。

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

Answer 4

@Ender，

我编辑了你提供的代码的最后两行，现在正在按照我的意愿运行。

$('input[type=text]').attr("disabled", "disabled");
$('input[type=radio]:checked').next().removeAttr("disabled", "disabled");

最后一行考虑了radiobutton的主要初始状态，然后相应地启用了旁边的文本框。

非常感谢。

如何根据选中的单选按钮启用/禁用某个文本框？

4 个答案: