Javascript 当asp:TextBox为空时禁用按钮&;没有选择asp:RadioButton
我有一个Javascript 当asp:TextBox为空时禁用按钮&;没有选择asp:RadioButton,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我有一个asp.netwebform,如果我的asp:TextBox为空,并且没有为我的asp:RadioButton进行选择,我希望我的提交按钮被禁用 目前,我有以下我的领域,但我不知道如何才能加入这个单选按钮 JQuery $(document).ready(function () { $("#MainContent_btnRemoveUser").prop('disabled', true); $("#MainContent_
asp.net
webform,如果我的asp:TextBox
为空,并且没有为我的asp:RadioButton
进行选择,我希望我的提交按钮被禁用
目前,我有以下我的领域,但我不知道如何才能加入这个单选按钮
JQuery
$(document).ready(function ()
{
$("#MainContent_btnRemoveUser").prop('disabled', true);
$("#MainContent_btnAddUser").prop('disabled', true);
});
// Disables 'Remove' button unless all fields popluted
$("#MainContent_txtRemoveUser").on("change", function ()
{
if ($('#MainContent_txtUsername').val())
{
$("#MainContent_btnRemoveUser").prop('disabled', false);
}
else
{
$("#MainContent_btnRemoveUser").prop('disabled', true);
}
});
HTML
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
<div class="col-sm-3">
<asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label">
<b>Request For</b>
</asp:Label>
<div class="col-sm-3">
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself
</label>
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user
</label>
</div>
</div>
<div class="row">
<div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px">
<asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
<div class="col-sm-3">
<asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label">
<b>Request For</b>
</asp:Label>
<div class="col-sm-3">
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself
</label>
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user
</label>
</div>
</div>
<div class="row">
<div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px">
<asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." />
</div>
</div>
输入要删除的名称
请求
我自己
其他用户
尝试将if($('MainContent\u txtUsername').val()替换为
if($('#MainContent\u txtUsername').val()!='')
对于单选按钮,不要在更改时检查任何条件,并编写相同的逻辑。好了!添加了一个新功能来禁用该按钮,并将在文本框的模糊和单选按钮的更改时调用该功能
HTML
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
<div class="col-sm-3">
<asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label">
<b>Request For</b>
</asp:Label>
<div class="col-sm-3">
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself
</label>
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user
</label>
</div>
</div>
<div class="row">
<div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px">
<asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
<div class="col-sm-3">
<asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label">
<b>Request For</b>
</asp:Label>
<div class="col-sm-3">
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself
</label>
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user
</label>
</div>
</div>
<div class="row">
<div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px">
<asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." />
</div>
</div>
输入要删除的名称
请求
我自己
其他用户
JavaScript
<script>
$(document).ready(function () {
$("#MainContent_btnRemoveUser").prop('disabled', true);
$("#MainContent_btnAddUser").prop('disabled', true);
});
$("#MainContent_txtRemoveUser").on("blur", function () {
disableButton();
});
$("#MainContent_rbRemoveYourself").change(function () {
disableButton();
});
$("#MainContent_rbRemoveOtherUser").change(function () {
disableButton();
});
// Disables 'Remove' button unless all fields popluted
function disableButton() {
var isRbRemoveSelfChecked = $("#MainContent_rbRemoveYourself").is(':checked')
var isRbRemoveOtherChecked = $("#MainContent_rbRemoveOtherUser").is(':checked')
if ($('#MainContent_txtRemoveUser').val() != '' && (isRbRemoveSelfChecked || isRbRemoveOtherChecked)) {
$("#MainContent_btnRemoveUser").prop('disabled', false);
}
else {
$("#MainContent_btnRemoveUser").prop('disabled', true);
}
}
</script>
$(文档).ready(函数(){
$(“#MainContent_btnRemoveUser”).prop('disabled',true);
$(“#MainContent_btnAddUser”).prop('disabled',true);
});
$(“MainContent\u txtRemoveUser”)。在(“模糊”,函数(){
禁用按钮();
});
$(“#main content_rbremove yourself”).change(函数(){
禁用按钮();
});
$(“#main content_rbRemoveOtherUser”).change(函数(){
禁用按钮();
});
//除非弹出所有字段,否则禁用“删除”按钮
函数禁用按钮(){
var isRbRemoveSelfChecked=$(“#main content_rbremove yourself”)。是(“:checked”)
var isRbRemoveOtherChecked=$(“#main content_rbRemoveOtherUser”)。是(“:checked”)
if($('#MainContent_txtRemoveUser').val()!=''&(isRbRemoveSelfChecked | isRbRemoveOtherChecked)){
$(“#MainContent_btnRemoveUser”).prop('disabled',false);
}
否则{
$(“#MainContent_btnRemoveUser”).prop('disabled',true);
}
}
这将为您提供预期的结果:-
$('input[name="RemoveRequestFor"]').change(function () {
if($("#MainContent_txtUsername").val().trim() != "")
$("#MainContent_btnAddUser").prop('disabled', false);
});
$("#MainContent_txtUsername").blur(function () {
if($('input[name="RemoveRequestFor"]:checked').length > 0)
$("#MainContent_btnAddUser").prop('disabled', false);
});
此外,您可以使用keyup
功能而不是blur
,以使表单更具响应性。所发生的一切是,只要我在“txtRemoveUser”字段中输入文本,该按钮就会启用,而无需我选择单选按钮将条件从或更改为和。将事件也更改为模糊而不是更改我已修改了答案。让我知道这是否有帮助。现在,当我填充字段并选择我的收音机按钮时,它不会启用。我已将断点添加到vars
和if
中,当我单击选项卡或单击字段外时,它会命中,但当我选择我的收音机按钮时,它不会命中。这比我自己的答案干净得多,结果是一样的!