Получить идентификаторы всех непроверенных флажков с помощью jQuery

Моя главная цель-разместить «0», когда флажок снят. Я столкнулся с техникой, где мне нужно поместить скрытое поле, которое имеет то же имя, что и с моим флажком. Как только флажок установлен, скрытое поле отключено. It works wonder for me, however, the code seems to be so long and I wanted to look a way to shorten this up.

HTML:

<div id="subscriptionForm">
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
  <input type="hidden" value="0" name="checkLeft1" id="checkLeft1Hidden" />
  <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
  <input type="hidden" value="0" name="checkLeft2" id="checkLeft2Hidden" />

  <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
  <input type="hidden" value="0" name="checkRight1" id="checkRight1Hidden" />
  <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
  <input type="hidden" value="0" name="checkRight2" id="checkRigh21Hidden" />
</div>

Скрипт:

function disableHidden() {
  if ($("#checkLeft1").is(":checked")) {
    $("#check1Hidden").attr("disabled", true);
  }
  if ($("#checkLeft2").is(":checked")) {
    $("#check2Hidden").attr("disabled", true);
  }
  if ($("#checkRight1").is(":checked")) {
    $("#trAsiaEuropeHidden").attr("disabled", true);
  }
  if ($("#checkRight2").is(":checked")) {
    $("#trAsiaNamHidden").attr("disabled", true);
  }
}

Я должен был поставить различные классы слева и справа, чтобы следовать желаемой компоновке.

У вас есть какие-то предложения по этому поводу?
Спасибо!

6 ответов

  1. Если у вас нет согласованного шаблона именования для ваших флажков/скрытых полей, или у вас есть гарантированное согласованное размещение скрытого поля после ваших флажков, вы не сможете сделать это программно.

    Ваши флажки должны быть названы таким образом? Вы собираетесь иметь скрытые поля, размещенные сразу после флажков? Причина, по которой я спрашиваю, из-за trAsia… идентификаторы, перечисленные в Примере сценария.

  2. Если вы просто хотите «отключить» скрытый ввод, если установлен флажок, предшествующий ему, то вы можете сделать что-то вроде этого:

       $('#subscriptionForm').find('[type="checkbox"]').change(function() {
            $(this).next('[type="hidden"]').attr('disabled', $(this).is(':checked'));
       }).change();
    

    Демо-версия JSFiddle: https://jsfiddle.net/zka3m8a1/3/

  3. Все, что у вас есть в коде, немного перебор. В зависимости от места, которое получает данные (если PHP), вы должны иметь возможность переместить скрытые поля выше связанных с ними флажков, а затем удалить Javascript полностью.

    <div id="subscriptionForm">
      <input type="hidden" value="0" name="checkLeft1" id="checkLeft1Hidden" />
      <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
      <input type="hidden" value="0" name="checkLeft2" id="checkLeft2Hidden" />
      <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
      <input type="hidden" value="0" name="checkRight1" id="checkRight1Hidden" />
      <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
      <input type="hidden" value="0" name="checkRight2" id="checkRigh21Hidden" />
      <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
    </div>
    

    Если, однако, вы предпочитаете Javascript и более чистый HTML, то вы можете просто вставить некоторые скрытые поля, такие как:

    function zeroOutUncheckedFields() {
      $('#subscriptionForm input[type="checkbox"]').each(function(){
        if (!$(this).is(':checked')) {
          $(this).after('<input type="hidden" name="' + $(this).attr('name') + '" value="0">')
        }
      });
    }
    

    а ваш HTML может просто быть:

    <div id="subscriptionForm">
      <input type="checkbox" value="1" class="checkLeft" name="checkLeft1" id="checkLeft1" />
      <input type="checkbox" value="1" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
      <input type="checkbox" value="1" class="checkRight" name="checkRight1" id="checkRight1"/>
      <input type="checkbox" value="1" class="checkRight" name="checkRight2" id="checkRight2"/>
    </div>
    
  4. Это может помочь вам

    HTML

    <div id="subscriptionForm">
      <input type="checkbox" class="checkLeft" name="checkLeft1" id="checkLeft1" />
      <input type="checkbox" class="checkLeft" name="checkLeft2" id="checkLeft2"/>
      <input type="checkbox" class="checkRight" name="checkRight1" id="checkRight1"/>
      <input type="checkbox" class="checkRight" name="checkRight2" id="checkRight2"/>
    </div>
    

    jQuery

    $("input:checkbox").on("change", function() {
      console.log($(this).is(":checked"));
    });