JQuery does not disable my radio buttons

advertisements

I have an asp.net website which I have some code which if my Tel or Email field are blank then y 'Tel' and 'Email' radio button is disabled but the issue I have is that I when I hit the page, the radio buttons are not disabling. I have tried using all the extensions on the following webpage but still nothing (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>


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