Как отключить определенную радиокнопку в 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. Кто-нибудь может мне помочь?

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> 

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

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

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

Edit:

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

Answer 2

Хотя решение Daniel является по большей части правильным, с 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'); 
      }); 
     }); 

Answer 3

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