Remove disabled attribute using JQuery

Question

I have tried following code given in JSFIDDLE...

But it is not working...

I want to Enable submit button only after filling all input fields....

JSFIDDLE

code tried :

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

Solution 1

What you're looking for is:

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

Solution 2

First of all, listen input event instead of keyup, The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed(including paste using right-click etc.)

You are updating empty value for every element. If last element is having valid value, variable will be false. use the same variable as flag in .each loop and prevent loop for next occurrences if value is 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

Comments

[Anthony Grist]

No, what they're really looking for is .prop(), not .attr() - they want to work with the disabled property of the element (which, I believe, jQuery implicitly does when you use the .attr() method, though I may be misremembering), rather than messing around with its attributes.

[Matt West]

The comment above is correct. If the disabled attribute is present at all, regardless of if it has a value of "false" the element will be disabled.