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

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>

@RayonDabre I tried it...Now it is working...But disabled attribute is enabled even after filling 3-4 fields only...i want to remove it only after filling all input fields — Dr Manish Lataa-Manohar Joshi, Apr 19 '16 at 08:31

Rhys Bradbury · Answer 1 · 2019-05-21T15:16:52.133

3

What you're looking for is:

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

edited May 21 '19 at 15:16

answered Apr 19 '16 at 09:46

Rhys Bradbury

1,699
13
24

2

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. – Anthony Grist Apr 19 '16 at 10:13
1

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. – Matt West May 03 '19 at 16:19

score 2 · Answer 2 · edited Apr 27 '16 at 09:49

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

sean comor · Answer 3 · 2020-12-01T15:48:53.633

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

u need to break out from each,then u need to set value when it's out from each

Remove disabled attribute using JQuery

3 Answers3

Fiddle demo