Question

这是我的jquery脚本来检查重复的用户名并使用ajax抛出错误。我希望在我得到重复时禁用所有其他字段。这是在username下的else语句下面已经可用。我想要出现此消息时禁用所有其他字段。我已将表单html附加到jquery脚本下面。我已经尝试了这个（$（＆＃34;＃details＆＃34;）。attr（＆＃34; disabled＆＃34;，true ）;）但不工作。任何帮助将不胜感激。

 $(document).ready(function(){
        $('#username').keyup(function(){// Keyup function for check the user action in input
            var Username = $(this).val(); // Get the username textbox using $(this) or you can use directly $('#username')
            var UsernameAvailResult = $('#username_avail_result'); // Get the ID of the result where we gonna display the results
            if(Username.length > 2) { // check if greater than 2 (minimum 3)
                UsernameAvailResult.html('Loading..'); // Preloader, use can use loading animation here
                var UrlToPass = 'action=username_availability&username='+Username;
                $.ajax({ // Send the username val to another checker.php using Ajax in POST menthod
                type : 'POST',
                data : UrlToPass,
                url  : 'checker.php',
                success: function(responseText){ // Get the result and asign to each cases
                    if(responseText == 0){
                        UsernameAvailResult.html('<span class="success">Username name available</span>');
                    }
                    else if(responseText > 0){
                        UsernameAvailResult.html('<span class="error">Username already taken</span>');


                    }
                    else{
                        alert('Problem with sql query');
                    }
                }
                });
            }else{
                UsernameAvailResult.html('Enter atleast 3 characters');
            }
            if(Username.length == 0) {
                UsernameAvailResult.html('');
            }
        });


    });

HTML：

名称： *

      </label>
    </div>
  <div class="form-input col-md-9">
    <input id="username" name="customer_name" placeholder="Name" data-required="true" class="parsley-validated" type="text">
         <td><div class="username_avail_result" id="username_avail_result"></div></td>
    </div>
  </div>
<div class="form-row">
  <div class="form-label col-md-3">
    <label for="details">
      Details :
      <span class="required">*</span>
      </label>
    </div>
  <div class="form-input col-md-9">
    <input id="details" placeholder="details" name="customer_details" value="" data-required="true" class="parsley-validated" type="text">
    </div>
  </div>
<div class="form-row">
  <div class="form-label col-md-3">
    <label for="domain">
      Domain :
      <span class="required">*</span>
      </label>
    </div>
  <div class="form-input col-md-9">
    <input id="domain" placeholder="Domain" name="domain" data-required="true" class="parsley-validated" type="text">
    </div>
  </div>
<div class="form-row">
  <div class="form-label col-md-3">
    <label for="vertical">
      Vertical :
      <span class="required">*</span>
      </label>
    </div>
  <div class="form-input col-md-9">
    <input id="vertical" placeholder="Vertical" name="vertical" data-required="true" class="parsley-validated" type="text">
    </div>
  </div>
<div class="form-row">
  <div class="form-label col-md-3">
    <label for="taxonomy">
      Taxonomy :
      <span class="required">*</span>
      </label>
    </div>
  <div class="form-input col-md-9">
    <input id="taxonomy" placeholder="Taxonomy" name="taxonomy" data-required="true" class="parsley-validated" type="text">
    </div>
  </div>
  <div class="divider"></div>
<div class="form-row">
  <div class="col-md-2 col-md-offset-3">
 <input type="submit" class="btn medium primary-bg" id="new-customer-valid" name="submit" onclick="javascript:$('#new-customer').parsley( 'validate' );" value="Submit" />
    </div>
  </div>
</form>

Answer 1

如果您使用的是jQuery版>=1.6，那么您需要使用 .prop() 而不是.attr()：

从jQuery 1.6开始，.attr（）方法为属性返回undefined 尚未设定。检索和更改DOM属性，例如选中，选中或禁用表单元素的状态，使用 .prop（）方法。

$("#details").prop("disabled",true);

Answer 2

我想在复制时禁用所有其他字段。

您可以更新为：

else if(responseText > 0){
   UsernameAvailResult.html('<span class="error">Username already taken</span>');
   $('form').find(':input').not(this).prop('disabled', true);
}//-^^^^^^^--you can place your form's id here

这是做什么的？

首先，您转到表单，:input将选择表单中的所有输入元素.not(this)将排除您正在使用的当前元素，然后您必须使用.prop()方法强烈推荐。你可以查看documentation for .attr()。

来自文档：

从jQuery 1.6开始，.attr（）方法为尚未设置的属性返回undefined。要检索和更改DOM属性（例如表单元素的已选中，已选择或已禁用状态），请使用.prop()方法。

或者您可以试试这个：

$(this).closest('form').find(':input').not(this).prop('disabled', true);

Answer 3

试试这个：

$("input['text']").attr("disabled",true);

当用户名已存在时，使用jquery禁用输入字段

3 个答案:

来自文档：