Как не допустить, чтобы 1 флажок был установлен наконец

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

<div class = "checkboxes">
<div class = "selection">
<label><input type = "checkbox" value = "5" data-toggle = "checkbox"> checkbox 1</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "10" data-toggle = "checkbox"> checkbox 2</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "15" data-toggle = "checkbox">checkbox 3</label>
</div>

</div>

Зачем нужен флажок, который нельзя поставить? Но в любом случае просто отключите его.

— 08.04.2019 12:07

@ maximelian1986 OP, вероятно, просит ограничить количество флажков, которые может установить пользователь. Из десяти можно проверить только 9. Это может быть любой из 10, который не нужно проверять

— 08.04.2019 12:08

Добро пожаловать в Stackoverflow. См. stackoverflow.com/help/как спросить . И добавьте больше подробностей о проблеме, с которой вы столкнулись. Поделитесь соответствующими фрагментами кода, которые вы пробовали до сих пор.

— 08.04.2019 12:09

@ maximelian1986 Не могу отключить. потому что я хочу, чтобы последний флажок проверки оставался неотмеченным, это должен быть случайный флажок.

— 08.04.2019 12:11

javascript jquery

08.04.2019 12:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

192

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать: $( "input[type=checkbox]" ).prop("checked", true);, чтобы установить флажок для всех входных данных.

и: $( "input[type=checkbox]" ).last().prop("checked", false); снять отметку с последнего.

$( "input[type=checkbox]" ).prop("checked", true);
$( "input[type=checkbox]" ).last().prop("checked", false);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "checkboxes">
<div class = "selection">
<label><input type = "checkbox" value = "5" data-toggle = "checkbox"> checkbox 1</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "10" data-toggle = "checkbox"> checkbox 2</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "15" data-toggle = "checkbox">checkbox 3</label>
</div>

</div>

Обновлять

Как поясняет ОП:

Вы можете просто использовать:

let checkboxcountlimit= $('input:checkbox').length-1;
$('input[type=checkbox]').click(function() {
  let checkboxchecked= $('input:checkbox:checked').length;
  if ($(this).is(':checked')) {
    if (checkboxchecked > checkboxcountlimit){
      //if ($(this).is($( "input[type=checkbox]" ).last())){
        $( "input[type=checkbox]" ).last().prop("checked", false);
      //}
    }
  }
});

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

let checkboxcountlimit= $('input:checkbox').length-1;
$('input[type=checkbox]').click(function() {
  let checkboxchecked= $('input:checkbox:checked').length;
  if ($(this).is(':checked')) {
    if (checkboxchecked > checkboxcountlimit){
      //if ($(this).is($( "input[type=checkbox]" ).last())){
        $( "input[type=checkbox]" ).last().prop("checked", false);
      //}
    }
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "checkboxes">
<div class = "selection">
<label><input type = "checkbox" value = "5" data-toggle = "checkbox"> checkbox 1</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "10" data-toggle = "checkbox"> checkbox 2</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "15" data-toggle = "checkbox">checkbox 3</label>
</div>

</div>

если вы хотите, чтобы текущий флажок был снят, если он превышает минус один счетчик.

Вы можете использовать:

let checkboxcountlimit= $('input:checkbox').length-1;
$('input[type=checkbox]').click(function() {
  let checkboxchecked= $('input:checkbox:checked').length;
  if ($(this).is(':checked')) {
    if (checkboxchecked > checkboxcountlimit){
        $(this).prop("checked", false);
    }
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "checkboxes">
<div class = "selection">
<label><input type = "checkbox" value = "5" data-toggle = "checkbox"> checkbox 1</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "10" data-toggle = "checkbox"> checkbox 2</label>
</div><br/>
<div class = "selection">
<label><input type = "checkbox" value = "15" data-toggle = "checkbox">checkbox 3</label>
</div>

</div>

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

— 08.04.2019 12:21

08.04.2019 12:13

Ответ принят как подходящий

надеюсь это поможет

function checkMe() {

  var selected = [];

  $('.selection input:checked').each(function() {
    selected.push($(this).attr('value'));
  });

  if (selected.length >= ($('.selection input').length)) {
    return false
  }

}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class = "checkboxes">
  <div class = "selection">
    <label><input type = "checkbox" value = "5" onclick = "return checkMe()" data-toggle = "checkbox"> checkbox 1</label>
  </div><br/>
  <div class = "selection">
    <label><input type = "checkbox" value = "10" onclick = "return checkMe()" data-toggle = "checkbox"> checkbox 2</label>
  </div><br/>
  <div class = "selection">
    <label><input type = "checkbox" value = "15" onclick = "return checkMe()"  data-toggle = "checkbox">checkbox 3</label>
  </div>

</div>

08.04.2019 12:29