如果字段为空，则禁用单选按钮

Question

我有一个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>

Answer 1

使用下面的sn-ps代码

$('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);  
  }
  
});

<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
  &nbsp;&nbsp;&nbsp;
  <input type="radio" name="preferred" disabled />Email
</div>

Answer 2

参考这个工作小提琴：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" />&nbsp;Email Address:
    <input type="text" id="email" />
    <br/>
    <br/>
    <input type="radio" name="preferred" disabled />Phone
    <input type="radio" name="preferred" disabled />Email</div>

Answer 3

您可以使用 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" );

} 

});

Answer 4

请查看此帖子以了解我找到的修复程序 (JQuery Not Disabling My Radio Buttons)