Как оптимизировать такой код?

comeoff44

Создатель
Регистрация
9 Мар 2008
Сообщения
23
Реакции
0
В общем, есть 4 формы, в них по 2 текстовых поля, 1 баттон(submitBtn), и 1 чекбокс (the-terms). По дефолту кнопка имеет атрибут disabled, чтобы на неё нельзя было нажать и отправить форму, пока не проставлен чекбокс (соглашение). Из кода всё понятно) Вот как оптимизировать код, чтобы мне не прописывать в него каждой новой кнопке и чекбоксу номер к селектору.

HTML:
<form>
    <input required type="text" name="name" placeholder="Ваше имя">
    <input required type="number" name="phone" placeholder="Номер телефона" >
    <button type="submit" id="submitBtn3" disabled/>
    Отправить
    </button>
      <input type="checkbox" id="the-terms3" />
      Согласен с <a href="#">правилами</a>
      </input>
</form>

Код:
<script>
      $(document).ready(function() {
          var the_terms = $("#the-terms");
          var the_terms2 = $("#the-terms2");
          var the_terms3 = $("#the-terms3");
          var the_terms4 = $("#the-terms4");
          the_terms.click(function() {
              if ($(this).is(":checked")) {
                  $("#submitBtn").removeAttr("disabled");
              } else {
                  $("#submitBtn").attr("disabled", "disabled");
              }
          });
          the_terms2.click(function() {
              if ($(this).is(":checked")) {
                  $("#submitBtn2").removeAttr("disabled");
              } else {
                  $("#submitBtn2").attr("disabled", "disabled");
              }
          });
          the_terms3.click(function() {
              if ($(this).is(":checked")) {
                  $("#submitBtn3").removeAttr("disabled");
              } else {
                  $("#submitBtn3").attr("disabled", "disabled");
              }
          });
          the_terms4.click(function() {
              if ($(this).is(":checked")) {
                  $("#submitBtn4").removeAttr("disabled");
              } else {
                  $("#submitBtn4").attr("disabled", "disabled");
              }
          });
      });
<script>
 
Кнопкам дать один класс например, собрать кнопки в массив и написать проверку по массиву с этим классом. Если кнопка с классом чекед хоть одна фалсе, применять стити. Если все труе то убрать стили. Или как удобно.
 
Кнопкам дать один класс например, собрать кнопки в массив и написать проверку по массиву с этим классом. Если кнопка с классом чекед хоть одна фалсе, применять стити. Если все труе то убрать стили. Или как удобно.
я имел ввиду в практике, как это сделать, в теории понятно
 
Блин с телефона сегодня, если до завтра не решишь, пиши в личку.

Примерно:
let select = $('.select');
$.each(select, function(i, s){
if($(s).isChecked()){
Тут если отмечены
}else{
Тут не отмечены
return false;
}
});

Из этого слепить функцию и вызывать ее по клику на чекбокс

На скорую руку с мобилы. Можно оптимизировать.
 
Последнее редактирование:
HTML:
  $('[id^="the-terms"]').on('click', function(){
    if ($(this).is(":checked")) {
          $(this).siblings('[id^="submitBtn"]').removeAttr("disabled");
      } else {
          $(this).siblings('[id^="submitBtn"]').attr("disabled", "disabled");
    }
  });
 
все 4 блока одинаковые? запилить функцию с входящим id, по нему и менять атрибуты
 
Назад
Сверху