Как создать 3 кнопки состояния флажка с начальной загрузкой 4

Question

Я создаю форму фильтра, я хочу отфильтровать объекты со свойством high = true или high = false или игнорировать это свойство.
Все, что я получаю, это значение "вкл" до сих пор.
Также на третьем значении (ноль или что-то еще) я хочу, чтобы стилирование было другим, например отключено.
Кто-нибудь знает простой способ сделать это?

function readValue() {
  var highValue = $('#high').val();
  $('#result').html(highValue);
  if (highValue === null) {
    //don't filter
  } else {
    //filter
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="btn-group-toggle" data-toggle="buttons">
  <label onclick="readValue()" class="btn btn-secondary active">
    <input id="high" type="checkbox" checked autocomplete="off"> High
  </label>
</div>
Result:<div id='result'></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Answer 1

Попробуйте следующим образом: эта группа кнопок является частью радиовхода Bootstrap UI с метками. У меня нет времени или интереса, чтобы украсить эти радиокнопки.

<script type="text/javascript">
    function renderRadioOptions() {
        var radioGroupOpacity = ( $(this).val() == '' ) ? 0.5 : 1.0;
        $("div#filter_options_group > label.btn").css('opacity', radioGroupOpacity);
    }

    $(function() {
        $("div#filter_options_group > label.btn").css('opacity', 0.5);
        $("input[name='options']").on('change', renderRadioOptions );
    });

</script>

<div class="btn-group btn-group-toggle" data-toggle="buttons" id="filter_options_group">
    <label class="btn btn-secondary active">
        <input type="radio" name="options" value="" id="option1" autocomplete="off" checked> 
        <i class="glyphicon glyphicon-remove">
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" value="low" id="option2" autocomplete="off"> Low
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" value="high" id="option3" autocomplete="off"> High
    </label>
</div>

Answer 2

Я нашел способ иметь столько состояний, сколько нужно, чтобы переключаться с помощью одной кнопки, пока кнопка указывает состояние. Это то, что я искал - большая часть кода с гордостью найдена и собрана из разных частей Интернета!
Если у вас есть предложение, как сделать это еще короче И проще, пожалуйста, прокомментируйте или напрямую отредактируйте его:)

var $radios = $('input[type="radio"][name="high"]');
$('#result').html($radios.filter(':checked').val());

$('#toggler').click(function() {
  var colorClasses = ["btn-danger", "btn-success", "btn-secondary"];
  var $checked = $radios.filter(':checked');
  var $next = $radios.eq($radios.index($checked) + 1);
  if (!$next.length) {
    $next = $radios.first();
  }
  $next.prop("checked", true);
  var newValue = $radios.filter(':checked').val();
  $(this)
    .removeClass(colorClasses.join(" "))
    .addClass(colorClasses[newValue]);
  $('#result').html(newValue);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="btn-group-toggle" data-toggle="buttons">
  <input type="radio" name="high" value="2" checked hidden>
  <input type="radio" name="high" value="1" hidden>
  <input type="radio" name="high" value="0" hidden>
  <button type="button" id="toggler" class="btn btn-secondary">High</button>
</div>
Result:
<div id='result'></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Answer 3

Аналогичный вопрос был задан, и некоторые люди предложили использовать псевдокласс :indeterminate для представления состояния NULL - где это свойство фильтра игнорируется.

Что такое: неопределенный?

Пользовательские флажки Bootstrap 4 используют псевдокласс :indeterminate только при ручной настройке с помощью JavaScript : http://getbootstrap.com/docs/4.1/components/forms/#custom-forms

:indeterminate является довольно новым, и не все браузеры отображают его правильно, поэтому я просто выбрал бы более простые подходы:

• Флажок рядом со свойством filter, чтобы указать, нужно ли нам фильтровать по этому свойству или нет
• Флажок или переключатель для отображения состояния true/yes или false/no.

На странице загрузки

Фильтр не выбран, а его доступные значения скрыты.

Фильтр выбран / задействован

Если выбран фильтр, отображаются его доступные значения.

При отправке

При отправке формы вы всегда можете передать 2 значения в:

• Включено или нет свойство фильтра, т. Е. $().is(":checked")
• Значение свойства фильтра, т.е. yes/no

Скрипка: http://jsfiddle.net/aq9Laaew/72593/

плагин jQuery

Плагин для нулевого флажка: http://vanderlee.github.io/tristate/