使用 JQuery 删除禁用的属性 [重复]

Question

我已经尝试过 JSFIDDLE 中给出的以下代码...

但它不起作用......

我只想在填写完所有输入字段后启用提交按钮......

JSFIDDLE

代码试过了：

<script>
 (function() {
   $('form > input').keyup(function() {

    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled'); 
    } else {
        $('#register').removeAttr('disabled'); 
    }
 });
})()
</script>

Answer 1

$(document).ready(function() {      
  $('.input-field').change(function() {
    var empty = false;
    $('.input-field').each(function() {
      $('#btn').addClass('disabled');  
        if($(this).val() == ''){
          empty = false; 
          return false; //u need to break out from each 
        }
        empty = true; //then u need to set value when it's out from each
    });   
    if(empty == true) { 
      $('#btn').removeClass('disabled');  
    } 
  });
});

你需要从每个中突破，然后你需要在它从每个出来时设置值

Answer 2

您正在寻找的是：

$('#register').prop('disabled', true); //makes it disabled
$('#register').prop('disabled', false); //makes it enabled

Answer 3

首先，监听input事件而不是keyup，DOM input事件在<input>或<textarea>元素的值发生变化时同步触发（包括paste使用right-click等等）

您正在更新每个元素的 empty 值。如果最后一个元素具有有效值，则变量将为false。在.each 循环中使用与flag 相同的变量，如果值为false，则防止循环下次出现

(function() {
  $('form  input').on('input', function() {
    var empty = false;
    $('form  input').each(function() {
      if (!empty && $(this).val() == '') {
        empty = true;
      }
    });
    $('#register').prop('disabled', empty);
  });
})()

.link-button-blue {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #002633;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  cursor: pointer;
}
.link-button-blue:disabled {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #333;
  color: #ccc;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  cursor: no-drop;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  <div class="form-field-input">
    <input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
  </div>
  <div class="form-field-label">Full Name :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fname" id="fname" required>
  </div>
  <div class="form-field-label">Address :</div>
  <div class="form-field-input">
    <textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required></textarea>
  </div>
  <br>
  <div class="form-field-label">Email :</div>
  <div class="form-field-input">
    <input type="text" value="" name="email" id="email" required>
  </div>
  <br>
  <div class="form-field-label">Mobile :</div>
  <div class="form-field-input">
    <input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
  </div>
  <br>
  <div class="form-field-label">Phone :</div>
  <div class="form-field-input">
    <input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
  </div>
  <div class="form-field-label">Fax :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
  </div>
  <div class="form-field-label">Birthdate :</div>
  <div class="form-field-input">
    <input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
  </div>
  <br>
  <div class="form-field-label">Age :</div>
  <div class="form-field-input">
    <input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
  </div>
  <br>
  <div class="form-field-label">Select Questionnaire Catagary :</div>
  <div class="form-field-input">
    <label class="checkbox">
      <input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
    <br>
  </div>
  <br>
  <div class="form-field-label">Gender :</div>
  <div class="form-field-input">
    <select name="gender" id="gender" required>
      <option value="">Select</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
  </div>
  <br>
  <div class="form-field-label"></div>
</form>

Fiddle demo