Реализация баттона с чекбоксом в Bootstrap 4

[mstdmstd]

Всем привет,

На сайт с Bootstrap v4.0.0-alpha.6 пытаюсь перенести реализацию баттона с чекбоксом из Bootstrap 3.3
live
там логин по умолчанию - кнопка рядом с инпутом для загрузки картинок
Код :

<div data-toggle="buttons" class=" ">
<label class="btn btn-primary btn-sm padding_sm" aria-pressed="false">
<input class="only_checkbox" value="1" autocomplete="off" id="cbx_clear_image" name="cbx_clear_image" type="checkbox">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Clear
</label>
</div>

С определением only_checkbox в style:
 

input.only_checkbox:not(:checked) + .fa-check {
visibility: hidden !important;
margin: 0 !important;
background-color: red !important;
}

input:not(:checked) + .fa-check {
visibility: hidden !important;
}

Чекбокс отображается но не переключается...

Или в 4 надо как-то иначе?

Спасибо!

[SnowSilver]

А с использованием бутстрап 3.3, у вас галочка исчезает/устанавливается, или просто цвет меняется?? у меня только цвет меняется

[mstdmstd]

В 3-ем галочка устанавливалась и убиралась ...

[mstdmstd]

Выложил старый проект, откуда и был взят этот код и где работает
войти на
login
с логином demo@com.ua / 111111
Потом перейти на
page
рядом с картинкой есть чекбокс для пометки “Clear”

Я что-то упустил при переносе на 4й или там какие-то нюансы дополнительно?
 

[Николя223]

http://joxi.ru/BA0dNE5hJ4nD1A

[mstdmstd]

Спасибо, вижу разные классы:
Я переделал fa-check и в коде и в стилях:
 

<div data-toggle="buttons" class=" ">
<label class="btn btn-primary btn-sm padding_sm" aria-pressed="false">
<input class="only_checkbox" value="1" autocomplete="off" id="cbx_clear_image" name="cbx_clear_image" type="checkbox">
<span class="fa fa-check" aria-hidden="true"></span>Clear
</label>
</div>

app.css:

input.only_checkbox:not(:checked) + .fa-check {
  visibility: hidden !important;
  margin: 0 !important;
  background-color: red !important;
}

input:not(:checked) + .fa-check {
  visibility: hidden !important;
}

Но по-прежнему не работает.Я еще что-то упустил?
 

[Николя223]

а font-awesome включен вообще? если нет то для .fa-check   нужно задать ширину, высоту и отображение inline-block

+ уберите вы все эти :not 

сделайте   

input.only_checkbox + .fa-check{

  visibility: hidden;

}

input.only_checkbox:checked + .fa-check{

  visibility: visible;

}

и эту хрень тоже убирайте

input:not(:checked) + .fa-check {
  visibility: hidden !important;
}

задайте всем элементам формы класс "form-control"  например, с ним и работайте.  для чекбоксов ещё какой нибудь   __checkbox

и в итоге обращение к чекбоксам будет 

.class_form   .__checkbox{



}

не надо названия тегов везде лепить, это стоит делать только для увеличения приоритета иерархии

[mstdmstd]

Я пытался следовать Вашим срветам но выяснил что и в моем первоначальном случае
и в вашем надо было убрать обертку toggle="buttons"
Я вывожу 2 кнопки

{{--<div data-toggle="buttons" class=" ">--}}
<label class="btn btn-primary btn-sm padding_sm">
<input class="only_checkbox" value="1" autocomplete="off" id="cbx_clear_image" name="cbx_clear_image" type="checkbox">
<span class="fa fa-check" aria-hidden="true"></span>Clear
</label>
{{--</div>--}}

<hr>
<hr>
{{--<div data-toggle="buttons" class=" ">--}}
<label class="btn btn-primary btn-sm padding_sm">
<input class="form-control __checkbox" value="1" autocomplete="off" id="cbx_clear_image" name="cbx_clear_image" type="checkbox">
<span class="fa fa-check" aria-hidden="true"></span>Clear
</label>
{{--</div>--}}
<hr>

Со стилями

.form-control .__checkbox + .fa-check{
visibility: hidden;
}

.form-control .__checkbox:checked + .fa-check{
visibility: visible;
}



input.only_checkbox:not(:checked) + .fa-check {
visibility: hidden !important;
margin: 0 !important;
background-color: red !important;
}

input:not(:checked) + .fa-check {
visibility: hidden !important;
}

И теперь чекбокс переключается но осталось убрать оригинальный чекбокс который прячется с оберткой
toggle="buttons"...


А как это совместить ?
 

[mstdmstd]

По-прежнему ищу решение
Я переделал пример с тем чтобы в зависимости от параметры убирать div вокруг чекбокса

@if( !empty($debug) and $debug == 9 )
<div data-toggle="buttons" class=" ">
@endif
<label class="btn btn-primary btn-sm padding_sm checked">
<input class="only_checkbox" value="1" autocomplete="off" id="cbx_clear_image" name="cbx_clear_image" type="checkbox" checked>
<span class="fa fa-check" aria-hidden="true"></span>Clear
</label>
@if( !empty($debug) and $debug == 9 )
</div>
@endif

<hr>
<hr>
@if( !empty($debug) and $debug == 9 )
<div data-toggle="buttons" class=" ">
@endif
<label class="btn btn-primary btn-sm padding_sm">
<input class="form-control __checkbox" value="1" autocomplete="off" id="cbx_clear_image" name="cbx_clear_image" type="checkbox" >
<span class="fa fa-check" aria-hidden="true"></span>Clear
</label>
@if( !empty($debug) and $debug == 9 )
</div>
@endif

link1
переключатель чекбокс работает но оригинальный чекбокс виден
и
link2
переключатель чекбокс не работает но оригинальный чекбокс не виден

как исправить ?

Спасибо!
 

[klierik]

выложи в jsfiddle

[mstdmstd]

https://jsfiddle.net/4hg9gqg3/2/