JQuery的不禁止我的单选按钮 [英] JQuery Not Disabling My Radio Buttons

查看：129
本文介绍了JQuery的不禁止我的单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个asp.net网站，我有一些code这要是我的电话或电子邮件字段是空白的，则Y电话和电子邮件单选按钮被禁止，但我有问题，我当我打页面，单选按钮不会禁用。我已经使用在以下网页，但仍然没有所有的扩展尝试
（ https://learn.jquery.com/using-jquery-core/document -ready / ）

JQuery的 

 ＆LT;脚本类型=文/ JavaScript的＆GT;
     $（输入[类型=编号]'）。在（'输入的propertyChange粘贴，函数（）
     {
          如果（$（'＃MainContent_TelField）V​​AL（）长度的方式＆gt; 0）
          {
               $（'＃MainContent_phone'）丙（禁用，假）;
          }
          其他
          {
               $（'＃MainContent_phone'）丙（禁用，真正的）;
          }
     }）;     $（输入[类型=文本]'）。在（'输入的propertyChange粘贴，函数（）
     {
          如果（$（'＃MainContent_EmailField）V​​AL（）长度的方式＆gt; 0）
          {
               $（'＃MainContent_email'）丙（禁用，假）;
          }
          其他
          {
               $（'＃MainContent_email'）丙（禁用，真正的）;
          }
     }）;
＆LT; / SCRIPT＆GT;

HTML 

 ＆LT; D​​IV CLASS =表单组＆GT;
                 ＆LT; ASP：标签ID =TelFieldLabel级=COL-MD-3控制标签=服务器文本=联系电话 AssociatedControlID =TelField＆GT;＆LT; / ASP：标签＆gt;
        ＆LT; D​​IV CLASS =COL-MD-3＆GT;
            ＆LT; ASP：文本框ID =TelField=服务器级=表格控TYPE =号码＆GT;＆LT; / ASP：文本框＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
   ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT; ASP：标签ID =EmailFieldLabel级=COL-MD-3控制标签=服务器文本=电子邮件地址AssociatedControlID =EmailField＆GT;＆LT; / ASP：标签＆gt;
        ＆LT; D​​IV CLASS =COL-MD-3＆GT;
            ＆LT; ASP：文本框ID =EmailField=服务器级=表格控型=文本＆GT;＆LT; / ASP：文本框＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =COL-MD-偏移3 COL-MD-9＆GT;
            ＆LT; ASP：显示的RequiredFieldValidator =动态=服务器ID =RequiredFieldValidator2SetFocusOnError =真前景色=红的ControlToValidate =EmailField的ErrorMessage =请输入您的电子邮件地址。 /＆GT;
            ＆LT; ASP：RegularEx pressionValidator显示=动态=服务器ID =RegularEx pressionValidator1SetFocusOnError =真前景色=红的ControlToValidate =EmailField的ErrorMessage =RegularEx pressionValidatorValidationEx pression =\\ w +（[ -  +'。] \\ w +）* @ \\ w +（[ - ] \\ w +）* \\ \\ w +（[ - ] \\ w +）*＆GT;电子邮件地址是无效的格式和LT; / ASP：RegularEx pressionValidator＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT; D​​IV CLASS =COL-XS-12＆GT;
            ＆LT; D​​IV CLASS =右拉＆GT;
                ＆LT; ASP：LinkBut​​ton的ID =提交按钮=服务器的OnClick =SubmitButton_Click的CssClass =BTN BTN-小学的OnClientClick =ShowProcessingPopup（）;＆GT;＆LT;跨度类=glyphicon glyphicon-OK＆GT ;＆LT; / SPAN＆GT;提交＆LT; / ASP：LinkBut​​ton的＆GT;
             ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;


解决方案

\r
\r

$（函数（）{\r
功能checkTelField（）{\r
如果（$（'＃MainContent_TelField）V​​AL（）长度的方式＆gt; 0）\r
          {\r
               $（'＃MainContent_phone'）丙（禁用，假）;\r
          }\r
          其他\r
          {\r
               $（'＃MainContent_phone'）丙（禁用，真正的）;\r
          }\r
}\r
功能checkEmailField（）{\r
如果（$（'＃MainContent_EmailField）V​​AL（）长度的方式＆gt; 0）\r
          {\r
               $（'＃MainContent_email'）丙（禁用，假）;\r
          }\r
          其他\r
          {\r
               $（'＃MainContent_email'）丙（禁用，真正的）;\r
          }\r
}\r
checkTelField（）;\r
checkEmailField（）;\r
}）;\r
     $（输入[类型=编号]'）。在（'输入的propertyChange粘贴，函数（）\r
     {\r
          如果（$（'＃MainContent_TelField）V​​AL（）长度的方式＆gt; 0）\r
          {\r
               $（'＃MainContent_phone'）丙（禁用，假）;\r
          }\r
          其他\r
          {\r
               $（'＃MainContent_phone'）丙（禁用，真正的）;\r
          }\r
     }）;\r
\r
     $（输入[类型=文本]'）。在（'输入的propertyChange粘贴，函数（）\r
     {\r
          如果（$（'＃MainContent_EmailField）V​​AL（）长度的方式＆gt; 0）\r
          {\r
               $（'＃MainContent_email'）丙（禁用，假）;\r
          }\r
          其他\r
          {\r
               $（'＃MainContent_email'）丙（禁用，真正的）;\r
          }\r
     }）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\"></script>\r
＆LT; D​​IV CLASS =表单组＆GT;\r
     ＆LT;标签=MainContent_TelFieldID =MainContent_TelFieldLabel级=COL-MD-3控制标签＆GT;联系电话＆LT; /标签＆gt;\r
     ＆LT; D​​IV CLASS =COL-MD-3＆GT;\r
          ＆LT;输入名称=$ ctl00 $日程地址搜索Maincontent TelFieldID =MainContent_TelField级=表格控型=编号/＆GT;\r
     ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; D​​IV CLASS =表单组＆GT;\r
     ＆LT;标签=MainContent_EmailFieldID =MainContent_EmailFieldLabel级=COL-MD-3控制标签＆GT;邮箱地址：LT; /标签＆gt;\r
     ＆LT; D​​IV CLASS =COL-MD-3＆GT;\r
          ＆LT;输入名称=$ ctl00 $日程地址搜索Maincontent EmailFieldID =MainContent_EmailField级=表格控型=文本/＆GT;\r
     ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; D​​IV CLASS =表单组＆GT;\r
     ＆LT;跨度ID =MainContent_ prefContactLabel级=COL-MD-3控制标签＆GT;联系*下的preferred方法; / SPAN＆GT;\r
     ＆LT; D​​IV CLASS =COL-MD-3＆GT;\r
          ＆LT;跨度类=单选内联＆GT;\r
               ＆LT;输入ID =MainContent_phone类型=电台NAME =$ ctl00 $$日程地址搜索Maincontent $ p pfcontactVALUE =电话/＆GT;电话\r
          ＆LT; / SPAN＆GT;\r
          ＆LT;跨度类=单选内联＆GT;\r
                ＆LT;输入ID =MainContent_email类型=电台NAME =$ ctl00 $$日程地址搜索Maincontent $ p pfcontactVALUE =电子邮件/＆GT;电子邮件\r
          ＆LT; / SPAN＆GT;\r
     ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r

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>

这篇关于JQuery的不禁止我的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆