Как отключить определенную радио-кнопку в RadioButtonList в Javascript

Question

Я в конце своего остроумия, когда дело доходит до этого. JavaScript определенно не моя сильная сторона, и я пытаюсь найти решение для Google. Вот код, который у меня есть:

<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>

А вот и JavaScript:

function disable(index, control)
    {  
        var selected=($("[ID$=_"+index+"] input[type=radio]:checked").val());

        //The rest of the stuff that I can't figure out
    }

Я хочу, чтобы каждый раз, когда вы нажимали переключатель в Group1Most RadionButtonList, он отключал соответствующий переключатель в Group1Least RadioButtonList. Проблема в том, что я не могу понять, как выбрать отдельный переключатель в RadioButtonList. Кто-нибудь может мне помочь?

javascript asp.net jquery

4

user558594 24 Авг 2010 в 19:20

Answer 1

Попробуйте добавить этот 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>

Предполагая, что значения совпадают, это будет работать. Вы также сможете сделать это по индексу, если хотите.

Если вы хотите, чтобы за один раз был отключен только один элемент, и повторно включить ранее отключенный элемент во второй группе, включите следующую строку в качестве первой строки в функцию щелчка. Он удалит атрибут disabled со всех входов в группе

     $('input[name="Group1Least"]').removeAttr("disabled")

Изменить:

В ответ на комментарий @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>

2

Daniel Dyson 24 Авг 2010 в 16:26

Answer 2

Это не очень динамично, но принцип этого приведет вас туда, где вы должны быть. Вы можете изменить постепенное исчезновение на изменение 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>

0

Jerzakie 24 Авг 2010 в 16:52

Answer 3

Хотя решение Даниэля по большей части является правильным, оно не будет хорошо работать с ASP.NET. Это связано с искажением идентификаторов ASP.NET, когда элементы управления находятся внутри контейнеров именования. Ваша самая простая ставка - добавить пару классов к вашим элементам управления.

Попробуй это:

<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>

И, поскольку я никогда не рекомендую писать встроенный JavaScript, я бы поместил это во внешний файл сценария, мы назовем его site.js и назовем его на вашей странице с помощью тега сценария, например:

<script type="text/javascript" src="site.js"></script>

Вызов:

$(function(){});

Сокращение для:

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

Итак, это идет внутри site.js:

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

0

steve_c 24 Авг 2010 в 16:15

Как отключить определенную радио-кнопку в RadioButtonList в Javascript

3 ответа

Похожие вопросы

Новые вопросы

javascript