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

使用下面的代码片段

＆＃13;

$('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);  
  }
  
});

＆＃13;

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

＆＃13;

Answer 2

请参阅此工作小提琴：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>

Answer 3

你可以使用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 4

请查看我发现的修复程序（JQuery Not Disabling My Radio Buttons）

禁用单选按钮如果字段为空

4 个答案: