Как отключить/включить флажки при загрузке с помощью jquery?

avatar
Wilf
8 августа 2021 в 18:21
42
2
1

Я хочу загрузить включенные флажки там, где отмечен .group. И отключенные, где .group не отмечено. Я могу переключить их, но не могу отключить непроверенный .group на отключенный.

После загрузки я ожидаю, что все зоны в Group 2 станут кликабельными. В то время как все в Group 1 выделены серым цветом, но кликнуть можно позже.

А также когда я снимаю флажок Group. Все зоны должны быть отключены. Они будут кликабельны, только если установлен флажок Group.

$(function() {
  enable_cb();
  $(".group").click(enable_cb);
  $(".zone").attr("disabled",true);//disabled by default
});

function enable_cb() {
  $(this).closest('div').find(".zone").prop("disabled", !this.checked);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<table>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
        <label class="btn btn-outline-success" for="g_1">Group 1</label>
        <input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1c">Zone C</label>
      </div>
      </td>
  </tr>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
        <label class="btn btn-outline-success" for="g_2">Group 2</label>
        <input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2c">Zone C</label>
      </div>
      </td>
  </tr>  
</table>

Пожалуйста, найдите скрипку здесь: https://jsfiddle.net/b50gwmzu/

Источник

Ответы (2)

avatar
Twisty
8 августа 2021 в 21:32
0

Рассмотрите следующее.

$(function() {
  function toggleZones(zIndex) {
    var status = $("#g_" + zIndex).is(":checked");
    $("input[id^='zone_" + zIndex + "']").prop("disabled", !status);
  }

  $(".group").change(function() {
    toggleZones($(this).attr("id").slice(-1));
  });

  $(".group").each(function(i, el) {
    toggleZones($(el).attr("id").slice(-1));
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<table>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
        <label class="btn btn-outline-success" for="g_1">Group 1</label>
        <input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1c">Zone C</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
        <label class="btn btn-outline-success" for="g_2">Group 2</label>
        <input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2c">Zone C</label>
      </div>
    </td>
  </tr>
</table>

При нажатии на одну из групп произойдет переключение, если она включена или отключена.

avatar
charlietfl
8 августа 2021 в 18:34
1

Повторите флажки неотмеченных групп и отключите их братьев и сестер и самих себя

  $("input.group").not(':checked').each(function(){
     $(this).siblings(':checkbox').addBack().prop('disabled', true);  
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<table>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
        <label class="btn btn-outline-success" for="g_1">Group 1</label>
        <input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_1c">Zone C</label>
      </div>
      </td>
  </tr>
  <tr>
    <td>
      <div class="btn-group w-100" role="group">
        <input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
        <label class="btn btn-outline-success" for="g_2">Group 2</label>
        <input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2a">Zone A</label>
        <input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2b">Zone B</label>
        <input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
        <label class="btn btn-outline-success" for="zone_2c">Zone C</label>
      </div>
      </td>
  </tr>  
</table>
Wilf
8 августа 2021 в 18:36
0

Почему Group 1 не может щелкнуть сейчас?

charlietfl
8 августа 2021 в 18:37
0

Почему ... потому что это то, что вы заявили, что хотели ... вся группа 1 выделена серым цветом, что для меня означает отключено. Если это не ожидаемое поведение, то вопрос должен быть более конкретным.

Wilf
8 августа 2021 в 18:39
0

Извините за мой плохой английский, что вызвало путаницу при объяснении. Я имею в виду, что Group 1 выделено серым цветом, потому что оно не проверено. В то время как Group 2 можно щелкнуть, потому что он проверяется при загрузке.

charlietfl
8 августа 2021 в 18:40
0

И это то, что я сделал. Если это должно быть по-другому, то необходимо дополнительное объяснение

Wilf
8 августа 2021 в 18:45
0

Я ценю ваши усилия, но я не могу их использовать. Прошу немного времени. Можете ли вы добавить Group 1 кликабельным?

charlietfl
8 августа 2021 в 18:57
0

Удалите addBack() из моего ответа, и он не будет отключен, только братья и сестры будут

charlietfl
8 августа 2021 в 19:16
1

Я думаю, это то, что вам нужно jsfiddle.net/3o59wfLu Флажки группы никогда не отключаются, но другие в каждой группе отключаются и включаются

Wilf
8 августа 2021 в 19:19
0

Большое тебе спасибо. Это то, что я ищу. Извините за мое плохое объяснение и трату вашего времени на исправление.

Wilf
8 августа 2021 в 19:34
0

Я столкнулся с другой проблемой. Должен ли я спросить здесь или создать еще один вопрос? Я хочу выбрать Group 3 (a or b), чтобы включить братьев и сестер. jsfiddle.net/s04ecw5b/1

charlietfl
8 августа 2021 в 19:37
0

Будет намного чище, если вы сможете добавить другой класс к «другому» в каждой коллекции. Затем вы можете использовать siblings('otherClassName')

Wilf
9 августа 2021 в 08:52
0

Привет, у меня проблема с последним вопросом. Я хочу либо Group 3a, либо Group 3b, либо оба клика. И включите связанный класс рядом с ним. Не могли бы вы иногда заглянуть сюда: jsfiddle.net/njfykdtw