如何在Javascript中禁用RadioButtonList中的某个单选按钮

说到这件事，我真是束手无策。JavaScript肯定不是我的强项，我一直在尝试谷歌搜索解决方案。以下是我的代码：

<asp:RadioButtonList ID="Group1Most" onClick="disable('Group1Most', 'Group1Least')" runat="server" >
                            <asp:ListItem Value="1"> |</asp:ListItem>
                            <asp:ListItem Value="2"> |</asp:ListItem>
                            <asp:ListItem Value="3"> |</asp:ListItem>
                            <asp:ListItem Value="4"> |</asp:ListItem>
                        </asp:RadioButtonList>

<asp:RadioButtonList ID="Group1Least" runat="server" >
                            <asp:ListItem Value="1"> This and That</asp:ListItem>
                            <asp:ListItem Value="2"> Fire and Ice</asp:ListItem>
                            <asp:ListItem Value="3"> Black and Tan</asp:ListItem>
                            <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem>
                        </asp:RadioButtonList>

---

我想做的是，每当您单击

Group1Most

RadionButtonList上的单选按钮时，它将禁用

Group1Least

RadioButtonList上相应的单选按钮。问题是我不知道如何在RadioButtonList中选择单个单选按钮。有人能帮我吗？

尝试将此jQuery添加到您的页面。您不需要编写的禁用函数

    <script type="text/javascript" >
         $(document).ready(function() {
             //hook up a click event to all of the inputs in your first group
             $('input[name="Group1Most"]').click(function() {
                 //identify the value from the checked item in the first group 
                 var checkedValue = $('[name="Group1Most"]:checked').val();
                 //identify the item in the second group and disable it.
                 $('input[name="Group1Least"][value=' + checkedValue + ']').attr('disabled', 'disabled');
             });
         });
     </script>

编辑：

在回答上面@Majid的评论时，控件的输出如下所示：

    <table id="Group1Most" border="0" onclick="disable('Group1Most', 'Group1Least')" >
     <tbody><tr>
      <td><input id="Group1Most_0" name="Group1Most" value="1" type="radio"><label for="Group1Most_0"> |</label></td>
     </tr><tr>
      <td><input id="Group1Most_1" name="Group1Most" value="2" type="radio"><label for="Group1Most_1"> |</label></td>
     </tr><tr>
      <td><input id="Group1Most_2" name="Group1Most" value="3" type="radio"><label for="Group1Most_2"> |</label></td>
     </tr><tr>
      <td><input id="Group1Most_3" name="Group1Most" value="4" type="radio"><label for="Group1Most_3"> |</label></td>
     </tr>
    </tbody></table>

    <table id="Group1Least" border="0">
     <tbody><tr>
      <td><input id="Group1Least_0" name="Group1Least" value="1" type="radio"><label for="Group1Least_0"> This and That</label></td>
     </tr><tr>
      <td><input id="Group1Least_1" name="Group1Least" value="2" type="radio"><label for="Group1Least_1"> Fire and Ice</label></td>
     </tr><tr>
      <td><input id="Group1Least_2" name="Group1Least" value="3" type="radio"><label for="Group1Least_2"> Black and Tan</label></td>
     </tr><tr>
      <td><input id="Group1Least_3" name="Group1Least" value="4" type="radio"><label for="Group1Least_3"> Smith and Wesson</label></td>
     </tr>
    </tbody></table>

|
|
|
|
这个和那个
火与冰
黑黝黝
史密斯威森

尽管Daniel的解决方案在很大程度上是正确的，但它不能与ASP.NET一起很好地工作。这是由于当控件位于命名容器中时，ASP.NET会损坏ID。最简单的方法是向控件添加几个类

<asp:RadioButtonList ID="Group1Most" runat="server" >
    <asp:ListItem Value="1"> |</asp:ListItem>
    <asp:ListItem Value="2"> |</asp:ListItem>
    <asp:ListItem Value="3"> |</asp:ListItem>
    <asp:ListItem Value="4"> |</asp:ListItem>
</asp:RadioButtonList>

<asp:RadioButtonList ID="Group1Least" runat="server" >
    <asp:ListItem Value="1"> This and That</asp:ListItem>
    <asp:ListItem Value="2"> Fire and Ice</asp:ListItem>
    <asp:ListItem Value="3"> Black and Tan</asp:ListItem>
    <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem>
</asp:RadioButtonList>

<script type="text/javascript">

    $("input[name$='Group1Most']").change(
        function () {
            var disableVal = $(this).val();
            var disableName = 'Group1Least_' + disableVal;
            $("input[id*='Group1Least']").each(
            function (i) {
                if($(this).val() == disableVal)
                    $(this).fadeOut("slow");
            });
            // you can disable, I just faded it out...
        });
</script>

试试这个：

<asp:RadioButtonList ID="Group1Most" CssClass="Group1Most" onClick="disable('Group1Most', 'Group1Least')" runat="server" >
                            <asp:ListItem Value="1"> |</asp:ListItem>
                            <asp:ListItem Value="2"> |</asp:ListItem>
                            <asp:ListItem Value="3"> |</asp:ListItem>
                            <asp:ListItem Value="4"> |</asp:ListItem>
                        </asp:RadioButtonList>

<asp:RadioButtonList ID="Group1Least" CssClass="Group1Least" runat="server" >
                            <asp:ListItem Value="1"> This and That</asp:ListItem>
                            <asp:ListItem Value="2"> Fire and Ice</asp:ListItem>
                            <asp:ListItem Value="3"> Black and Tan</asp:ListItem>
                            <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem>
                        </asp:RadioButtonList>

是以下的简写：

$(document).ready(function(){});

因此，这是在site.js中实现的：

$(function() {
             $('.Group1Most input').click(function() {
                 $('.Group1Least [value=' + $(this).val() + ']').attr('disabled','disabled');
             });
         });

---

这不是非常动态的，但它的原则会让你达到你需要的地方。您可以将淡出更改为css更改，并且可以稍后添加代码以重新启用所有其他控件

<asp:RadioButtonList ID="Group1Most" runat="server" >
    <asp:ListItem Value="1"> |</asp:ListItem>
    <asp:ListItem Value="2"> |</asp:ListItem>
    <asp:ListItem Value="3"> |</asp:ListItem>
    <asp:ListItem Value="4"> |</asp:ListItem>
</asp:RadioButtonList>

<asp:RadioButtonList ID="Group1Least" runat="server" >
    <asp:ListItem Value="1"> This and That</asp:ListItem>
    <asp:ListItem Value="2"> Fire and Ice</asp:ListItem>
    <asp:ListItem Value="3"> Black and Tan</asp:ListItem>
    <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem>
</asp:RadioButtonList>

<script type="text/javascript">

    $("input[name$='Group1Most']").change(
        function () {
            var disableVal = $(this).val();
            var disableName = 'Group1Least_' + disableVal;
            $("input[id*='Group1Least']").each(
            function (i) {
                if($(this).val() == disableVal)
                    $(this).fadeOut("slow");
            });
            // you can disable, I just faded it out...
        });
</script>

|
|
|
|
这个和那个
火与冰
黑黝黝
史密斯威森
$（“输入[name$='Group1Most']）。更改(
函数（）{
var disableVal=$（this.val（）；
var disableName='Group1Least\'+disableVal；
$（“输入[id*='Group1Least']）。每个(
职能（一）{
if（$（this）.val（）==disableVal）
美元（本）。淡出（“缓慢”）；
});
//你可以禁用，我只是把它淡出。。。
});

能否包含ASP.NET代码生成的实际HTML？有些人，像我一样，不使用ASP，并且发现很难猜测它输出什么HTML。这不是我的意思。我想禁用radiobuttonlist中的某个单选按钮。这是行$（'input[name=“Group1Least”][value='+checkedValue+']）中发生的情况。attr（'disabled'，'disabled'）；嗯，我试着用你写的代码，但是没有用。不过，谢谢你的努力。我真的很感激。嘿，所以我最终放弃了使用服务器控件，只使用常规的HTML单选按钮。你的解决方案很管用，我现在很高兴。我花了一整天的时间想知道怎么做。所以非常感谢！谢谢，史蒂夫。我在一个没有母版页的简单页面上测试它。我已经更新了我的答案，使选择器不使用Id。不需要使用类。radiobuttonlist生成的组名基于id，不会被asp.net损坏。例如，您可以将其用作脚本$（'input[name=“Group1Most”]”的第一行。单击（function（）{嘿，所以我最终放弃了使用服务器控件的尝试，只选择了常规的HTML单选按钮。你的解决方案可以做到这一点，我现在非常高兴。我花了一整天的时间试图找出如何做到这一点。非常感谢！你也可以删除disableName变量，这是一些调试代码。

$(document).ready(function(){});

$(function() {
             $('.Group1Most input').click(function() {
                 $('.Group1Least [value=' + $(this).val() + ']').attr('disabled','disabled');
             });
         });

<asp:RadioButtonList ID="Group1Most" runat="server" >
    <asp:ListItem Value="1"> |</asp:ListItem>
    <asp:ListItem Value="2"> |</asp:ListItem>
    <asp:ListItem Value="3"> |</asp:ListItem>
    <asp:ListItem Value="4"> |</asp:ListItem>
</asp:RadioButtonList>

<asp:RadioButtonList ID="Group1Least" runat="server" >
    <asp:ListItem Value="1"> This and That</asp:ListItem>
    <asp:ListItem Value="2"> Fire and Ice</asp:ListItem>
    <asp:ListItem Value="3"> Black and Tan</asp:ListItem>
    <asp:ListItem Value="4"> Smith and Wesson</asp:ListItem>
</asp:RadioButtonList>

<script type="text/javascript">

    $("input[name$='Group1Most']").change(
        function () {
            var disableVal = $(this).val();
            var disableName = 'Group1Least_' + disableVal;
            $("input[id*='Group1Least']").each(
            function (i) {
                if($(this).val() == disableVal)
                    $(this).fadeOut("slow");
            });
            // you can disable, I just faded it out...
        });
</script>