我有一个asp.net
网站,在联系我们表格中,有2个字段(电话号码和电子邮件地址)以及2个单选按钮(首选联系方式 - 电话/电子邮件)。我所追求的是当这些字段为空时禁用单选按钮,如果它们中有值,则启用它们。
我希望用户在开始输入这些字段时启用单选按钮,然后如果他们删除了值,那么他们就会被禁用,所以我知道需要使用JQuery或JavaScript来完成以太,但不确定如何这样做。
HTML
<div class="form-group">
<asp:Label ID="TelFieldLabel" class="col-md-3 control-label" runat="server" Text="Contact No." AssociatedControlID="TelField"></asp:Label>
<div class="col-md-3">
<asp:TextBox ID="TelField" runat="server" class="form-control" type="Number"></asp:TextBox>
</div>
</div>
<div class="form-group">
<asp:Label ID="EmailFieldLabel" class="col-md-3 control-label" runat="server" Text="Email address" AssociatedControlID="EmailField"></asp:Label>
<div class="col-md-3">
<asp:TextBox ID="EmailField" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="col-md-offset-3 col-md-9">
<asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="RequiredFieldValidator2" SetFocusOnError="true" ForeColor="Red" ControlToValidate="EmailField" ErrorMessage="Please enter your email address." />
<asp:RegularExpressionValidator Display="Dynamic" runat="server" ID="RegularExpressionValidator1" SetFocusOnError="True" ForeColor="Red" ControlToValidate="EmailField" ErrorMessage="RegularExpressionValidator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Email address is not a valid format.</asp:RegularExpressionValidator>
</div>
</div>
<asp:Label runat="server" class="radio-inline">
<asp:RadioButton runat="server" id="phone" value="Phone" GroupName="prefcontact"/> Phone
</asp:Label>
<asp:Label runat="server" class="radio-inline">
<asp:RadioButton runat="server" id="email" value="Email" GroupName="prefcontact"/> Email
</asp:Label>
答案 0 :(得分:1)
使用下面的代码片段
$('input[type="text"]').bind('blur', function(e) {
if($('#telNo').val().length > 0 || $('#email').val().length > 0){
$('input[type="radio"]').prop('disabled', false);
}else {
$('input[type="radio"]').prop('disabled', true);
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
Tel. No : <input type="text" id="telNo" /><br >
Email : <input type="text" id="email" /><br>
Preferred contact method :
<input type="radio" name="preferred" disabled />Tel
<input type="radio" name="preferred" disabled />Email
</div>
&#13;
答案 1 :(得分:1)
请参阅此工作小提琴:http://jsfiddle.net/xqfr4na6/1/
您可以在文本框中输入时使用input propertychange paste
更改单选按钮状态。使用此解决方案,您无需等待控件退出blur
函数所执行的文本框。
$('input[type="text"]').on('input propertychange paste', function () {
if ($('#telNo').val().length > 0 || $('#email').val().length > 0) {
$('input[type="radio"]').prop('disabled', false);
} else {
$('input[type="radio"]').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>Tel No.:
<input type="text" id="telNo" /> Email Address:
<input type="text" id="email" />
<br/>
<br/>
<input type="radio" name="preferred" disabled />Phone
<input type="radio" name="preferred" disabled />Email</div>
答案 2 :(得分:0)
你可以使用Jquery这样做。
$('#txtPhone').on('input',function(e){
if($('#txtPhone').val().length == 0){
$("#phone input:radio").attr('disabled',true);
$("#email input:radio").attr('disabled',true);
}
else{
$( '#phone input[type="radio"]' ).removeAttr( "disabled" );
$( '#email input[type="radio"]' ).removeAttr( "disabled" );
}
});
答案 3 :(得分:0)
请查看我发现的修复程序(JQuery Not Disabling My Radio Buttons)