JQuery 没有禁用我的单选按钮

Question

我有一个 asp.net 网站，我有一些代码，如果我的 Tel 或 Email 字段为空白，则 y 'Tel' 和 'Email' 单选按钮被禁用，但我遇到的问题是当我点击页面时，单选按钮未禁用。我已经尝试使用以下网页上的所有扩展，但仍然没有 (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(){
		function checkTelField(){
		  if ($('#MainContent_TelField').val().length > 0)
          {
               $('#MainContent_phone').prop('disabled', false);
          }
          else
          {
               $('#MainContent_phone').prop('disabled', true);    
          }
		}
		function checkEmailField(){
		  if ($('#MainContent_EmailField').val().length > 0)
          {
               $('#MainContent_email').prop('disabled', false);
          }
          else
          {
               $('#MainContent_email').prop('disabled', true);
          }
		}
		checkTelField();
		checkEmailField();
	});
     $('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 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

您需要在页面加载时从一开始就禁用选项按钮。现在，您仅在框中有一些输入时才尝试禁用它。这是你应该做的：

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

FIDDLE

Answer 3

将您的代码包装在 document-ready 处理程序中。

指定在 DOM 完全加载时执行的函数。

使用

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