JQuery不禁用我的單選按鈕

Question

我有一個asp.net網站，我有一些代碼，如果我的電話或電子郵件字段是空白，然後我'電話'和'電子郵件'單選按鈕被禁用，但我有問題是當我點擊頁面時，單選按鈕不會被禁用。我已經嘗試使用所有分機上的以下網頁，但仍然沒有 （https://learn.jquery.com/using-jquery-core/document-ready/）

JQuery的

<script type="text/javascript"> 
    $('input[type="Number"]').on('input propertychange paste', function() 
    { 
      if ($('#MainContent_TelField').val().length > 0) 
      { 
       $('#MainContent_phone').prop('disabled', false); 
      } 
      else 
      { 
       $('#MainContent_phone').prop('disabled', true);  
      } 
    }); 

    $('input[type="Text"]').on('input propertychange paste', function() 
    { 
      if ($('#MainContent_EmailField').val().length > 0) 
      { 
       $('#MainContent_email').prop('disabled', false); 
      } 
      else 
      { 
       $('#MainContent_email').prop('disabled', true); 
      } 
    }); 
</script> 

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" type="Text"></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> 
    <div class="form-group"> 
     <div class="col-xs-12"> 
      <div class="pull-right"> 
       <asp:LinkButton ID="SubmitButton" runat="server" OnClick="SubmitButton_Click" CssClass="btn btn-primary" OnClientclick="ShowProcessingPopup();"><span class="glyphicon glyphicon-ok"></span> Submit</asp:LinkButton> 
      </div> 
     </div> 
    </div> 

Answer 1

$(function(){ 
 
\t \t function checkTelField(){ 
 
\t \t if ($('#MainContent_TelField').val().length > 0) 
 
      { 
 
       $('#MainContent_phone').prop('disabled', false); 
 
      } 
 
      else 
 
      { 
 
       $('#MainContent_phone').prop('disabled', true);  
 
      } 
 
\t \t } 
 
\t \t function checkEmailField(){ 
 
\t \t if ($('#MainContent_EmailField').val().length > 0) 
 
      { 
 
       $('#MainContent_email').prop('disabled', false); 
 
      } 
 
      else 
 
      { 
 
       $('#MainContent_email').prop('disabled', true); 
 
      } 
 
\t \t } 
 
\t \t checkTelField(); 
 
\t \t checkEmailField(); 
 
\t }); 
 
    $('input[type="Number"]').on('input propertychange paste', function() 
 
    { 
 
      if ($('#MainContent_TelField').val().length > 0) 
 
      { 
 
       $('#MainContent_phone').prop('disabled', false); 
 
      } 
 
      else 
 
      { 
 
       $('#MainContent_phone').prop('disabled', true);  
 
      } 
 
    }); 
 

 
    $('input[type="Text"]').on('input propertychange paste', function() 
 
    { \t 
 
      if ($('#MainContent_EmailField').val().length > 0) 
 
      { 
 
       $('#MainContent_email').prop('disabled', false); 
 
      } 
 
      else 
 
      { 
 
       $('#MainContent_email').prop('disabled', true); 
 
      } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="MainContent_TelField" id="MainContent_TelFieldLabel" class="col-md-3 control-label">Contact No.</label> 
 
    <div class="col-md-3"> 
 
      <input name="ctl00$MainContent$TelField" id="MainContent_TelField" class="form-control" type="Number" /> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="MainContent_EmailField" id="MainContent_EmailFieldLabel" class="col-md-3 control-label">Email address</label> 
 
    <div class="col-md-3"> 
 
      <input name="ctl00$MainContent$EmailField" id="MainContent_EmailField" class="form-control" type="Text" /> 
 
    </div> 
 
</div> 
 
<div class="form-group"> 
 
    <span id="MainContent_PrefContactLabel" class="col-md-3 control-label">Preferred method of contact *</span> 
 
    <div class="col-md-3"> 
 
      <span class="radio-inline"> 
 
       <input id="MainContent_phone" type="radio" name="ctl00$MainContent$prefcontact" value="Phone" /> Phone 
 
      </span> 
 
      <span class="radio-inline"> 
 
       <input id="MainContent_email" type="radio" name="ctl00$MainContent $prefcontact" value="Email" /> Email 
 
      </span> 
 
    </div> 
 
</div>

Answer 2

總結你的代碼document-ready處理。

指定一個函數在DOM完全加載時執行。

使用

$(function() { 
    $('input[type="Number"]').on('input propertychange paste', function() { 
     //Rest of the code 
    }) 
}) 

Answer 3

你需要從一開始就在頁面加載時禁用選項按鈕。現在，只有在框中有一些輸入時才試圖禁用它。這是你應該做的：

$('#MainContent_phone').prop('disabled', true); 
$('#MainContent_email').prop('disabled', true); 

FIDDLE