Удалить отключенный атрибут с помощью JQuery

Question

Удалить отключенный атрибут с помощью JQuery

Я пробовал следующий код, указанный в 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>

3

javascript html jquery disabled-input

Источник

user3200792 19 апр '16 в 08:23

2 ответа

Другие вопросы по тегам javascript html jquery disabled-input

user5398254 19 апр '16 в 09:46 2016-04-19 09:46 · Answer 1 · 2016-04-19 09:46

То, что вы ищете, это:

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

3

Источник

user5398254 19 апр '16 в 09:46

user1746830 19 апр '16 в 09:45 2016-04-19 09:45 · Answer 2 · 2016-04-19 09:45

Прежде всего, послушай input событие вместо keyup, DOM inputсобытие запускается синхронно, когда значение<input>или же<textarea> элемент изменен (включая paste с помощью right-click так далее.)

Вы обновляетеemptyзначение для каждого элемента. Если последний элемент имеет допустимое значение, переменная будетfalse, использовать ту же переменную, что и flag в .eachцикл и предотвращение цикла для следующих вхождений, если значение 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>

Скрипка демо

user12453009 16 окт '20 в 11:33 2020-10-16 11:33 · Answer 3 · 2020-10-16 11:33

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

вам нужно вырваться из каждого, затем вам нужно установить значение, когда оно выходит из каждого