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

Тема в разделе "JavaScript", создана пользователем comeoff44, 30 май 2018.

Метки:
  1. comeoff44

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

    vitbsd Постоялец

    Регистр.:
    26 ноя 2009
    Сообщения:
    115
    Симпатии:
    77
    Кнопкам дать один класс например, собрать кнопки в массив и написать проверку по массиву с этим классом. Если кнопка с классом чекед хоть одна фалсе, применять стити. Если все труе то убрать стили. Или как удобно.
     
  3. comeoff44

    comeoff44 Создатель

    Регистр.:
    9 мар 2008
    Сообщения:
    23
    Симпатии:
    0
    я имел ввиду в практике, как это сделать, в теории понятно
     
  4. vitbsd

    vitbsd Постоялец

    Регистр.:
    26 ноя 2009
    Сообщения:
    115
    Симпатии:
    77
    Блин с телефона сегодня, если до завтра не решишь, пиши в личку.

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

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

    На скорую руку с мобилы. Можно оптимизировать.
     
    Последнее редактирование: 30 май 2018
    comeoff44 нравится это.
  5. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    480
    Симпатии:
    320
    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");
        }
      });
     
  6. Zmeyonish

    Zmeyonish Создатель

    Регистр.:
    29 мар 2013
    Сообщения:
    15
    Симпатии:
    0
    все 4 блока одинаковые? запилить функцию с входящим id, по нему и менять атрибуты