[英]Enable button only when both radio groups are selected
我正在使用ASP.NET控件。 在我的表單中,我有4個單選按鈕。 單選按鈕組名稱之一是書,另一個是卡。 我的目標是,如果沒有單擊任何單選按鈕或僅單擊了其中一個組,則禁用下一個按鈕。 要啟用下一個按鈕,用戶必須從一個書籍選項和一個卡片選項中進行選擇。 我該怎么做?
視覺效果
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"/>
<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>
這可能工作:
<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>
抱歉,但我必須添加一個答案,該答案使用RadioButtonList
而不是一組2個RadioButtons,對按鈕使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.