仅在选择了两个电台组时才启用按钮

-1

我正在使用ASP.NET控件。在我的表格中，我有4个单选按钮。其中一个单选按钮组名是book另一个是card。我的目标是禁用下一个按钮，如果没有单选按钮或者只有其中一个组被点击。要启用下一个按钮，用户必须从其中一个图书选项和一个卡选项中进行选择。我怎样才能做到这一点？仅在选择了两个电台组时才启用按钮

视觉

ASP.NET - HTML

<div style="padding:30px; background-color:antiquewhite;"> 

    <div style="background-color:aliceblue; width:190px; padding:10px;"> 
     <asp:RadioButton ID="RadioPassBookYes" runat="server" Text="Book-Yes" GroupName="book"/> 
     <asp:RadioButton ID="RadioPassBookNo" runat="server" Text="Book-No" GroupName="book"/> 
    </div> 
    <br> 
    <div style="background-color:ActiveBorder; width:190px; padding:10px;"> 
     <asp:RadioButton ID="RadioPassCardYes" runat="server" Text="Card-Yes" GroupName="card"/> 
     <asp:RadioButton ID="RadioPassCardNo" runat="server" Text="Card-No" GroupName="card"/> 
    </div> 

    <br> 
    <asp:Button ID="BtnNextRecentInfo" runat="server" Text="Next" disabled="disabled"/> 
    &nbsp; 
    <asp:Button ID="btnCheck" runat="server" Text="Check" /> 
</div>

JS脚本

<script type="text/javascript"> 

     var isCheckedPassBookYes = $("#<%=RadioPassBookYes.ClientID%>").prop('checked'); 
     var isCheckedPassBookNo = $("#<%=RadioPassBookNo.ClientID%>").prop('checked'); 
     var isCheckedPassCardYes = $("#<%=RadioPassCardYes.ClientID%>").prop('checked'); 
     var isCheckedPassCardNo = $("#<%=RadioPassCardNo.ClientID%>").prop('checked'); 


     $("#<%=RadioPassBookYes.ClientID%>").click(function() { 
     }); 
     $("#<%=RadioPassBookNo.ClientID%>").click(function() { 
      isCheckedPassBookNo = true 
     }); 
     $("#<%=RadioPassCardYes.ClientID%>").click(function() { 
     }); 
     $("#<%=RadioPassCardNo.ClientID%>").click(function() { 
      isCheckedPassCardNo = true 
     }); 


     if (isCheckedPassBookYes === true) { 
      $("#<%=BtnNextRecentInfo.ClientID%>").attr("disabled", "disabled"); 
     } 

     if (isCheckedPassBookNo === true) { 
      $("#<%=BtnNextRecentInfo.ClientID%>").removeAttr("disabled"); 
     } 
</script>

来源

2017-06-15 taji01

这可能只是工作：

<script type="text/javascript"> 


      $("#<%=RadioPassBookYes.ClientID%>").click(function() { 
       check_selection(); 
      }); 
      $("#<%=RadioPassBookNo.ClientID%>").click(function() { 
       check_selection(); 
      }); 
      $("#<%=RadioPassCardYes.ClientID%>").click(function() { 
       check_selection(); 
      }); 
      $("#<%=RadioPassCardNo.ClientID%>").click(function() { 
       check_selection(); 
      }); 

      check_selection(); 

      function check_selection() 
      { 
       var isCheckedPassBookYes = $("#<%=RadioPassBookYes.ClientID%>"); 
       var isCheckedPassBookNo = $("#<%=RadioPassBookNo.ClientID%>"); 
       var isCheckedPassCardYes = $("#<%=RadioPassCardYes.ClientID%>"); 
       var isCheckedPassCardNo = $("#<%=RadioPassCardNo.ClientID%>"); 

       if(
        (isCheckedPassBookNo.is(':checked') || isCheckedPassBookYes.is(':checked')) 
        && (isCheckedPassCardYes.is(':checked') || isCheckedPassCardNo.is(':checked')) 
        ) 
        { 

         $("#<%=BtnNextRecentInfo.ClientID%>").removeAttr("disabled"); 
        } 
        else 
        { 
         $("#<%=BtnNextRecentInfo.ClientID%>").attr("disabled", "disabled"); 
        } 

      }   
    </script>

来源

2017-06-15 18:08:40

它几乎可行！这是我对它的测试。我从组册中选择了一个单选按钮，然后从组卡中选择了一个选项。下一个按钮被启用，这是个好消息！但是，只要我刷新了页面，当我尝试单击下一个按钮时，我的单选按钮已被选中，它就被禁用了，因为我没有单击其中一个单选按钮。 – taji01

再次尝试更新的代码。 –

谢谢！这正是我所期待的。 – taji01

很抱歉，但我不得不添加使用的RadioButtonList，而不是2单选按钮一组答案，使用ASPNET Enabled属性按钮，并用约1/4的javascript行作为接受的答案。

<asp:RadioButtonList ID="RadioPassBook" runat="server"> 
    <asp:ListItem Text="Book-Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="Book-No" Value="0"></asp:ListItem> 
</asp:RadioButtonList> 

<asp:RadioButtonList ID="RadioPassCard" runat="server"> 
    <asp:ListItem Text="Card-Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="Card-No" Value="0"></asp:ListItem> 
</asp:RadioButtonList> 

<asp:Button ID="BtnNextRecentInfo" runat="server" Text="Next" Enabled="false" /> 

<script type="text/javascript"> 
    $("#<%= RadioPassBook.ClientID %>, #<%= RadioPassCard.ClientID %>").change(function() { 
     CheckBothRadioButtonLists(); 
    }); 

    function CheckBothRadioButtonLists() { 
     if ($("input[name='<%= RadioPassBook.UniqueID %>']:checked").val() == null || $("input[name='<%= RadioPassCard.UniqueID %>']:checked").val() == null) { 
      $("#<%= BtnNextRecentInfo.ClientID %>").attr("disabled", "disabled"); 
     } else { 
      $("#<%= BtnNextRecentInfo.ClientID %>").removeAttr("disabled"); 
     } 
    } 
</script>

这里的代码片段，如果你想使用一个ASPNET验证。

<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="CheckBothRadioButtonLists" ErrorMessage="Both lists have to be selected"></asp:CustomValidator> 

<script type="text/javascript"> 
    function CheckBothRadioButtonLists(sender, element) { 
     if ($("input[name='<%= RadioPassBook.UniqueID %>']:checked").val() == null || $("input[name='<%= RadioPassCard.UniqueID %>']:checked").val() == null) { 
      element.IsValid = false; 
     } else { 
      element.IsValid = true; 
     } 
    } 
</script>

来源

2017-06-15 19:15:19 VDWWD

仅在选择了两个电台组时才启用按钮

回答

相关问题