禁用單選按鈕如果字段空

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

請查看這篇文章的修正，我發現（JQuery Not Disabling My Radio Buttons）

Answer 2

你能做到這樣使用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 3

使用下面的代碼片段

$('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 4

請參閱該工作小提琴：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>