Управление checkbox с помощью jQuery / Скрипты / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 104

Количество символов:

Посмотрели: 2296 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, чекбокс, CheckBox, пример, Demo, Bootstrap, бутстрап

Поделился: BootstrapТема

Добавлено: 2015-11-29 в 19:21

Метка: 1566071655

⇄ ⇅

<div class="col-lg-6">
<h3>Активировать</h3> 
<input id="ch1" type="checkbox" class="form-control" />
<script>
$("#ch1").prop("checked", true);
</script>
</div>

<div class="col-lg-6" id="ch1">
<h3>Активировать все</h3>
<div class="col-lg-2"><input id="ch11" type="checkbox" class="form-control" /></div>
<div class="col-lg-2"><input id="ch12" type="checkbox" class="form-control" /></div>
<div class="col-lg-2"><input id="ch13" type="checkbox" class="form-control" /></div>
<script>
$("#ch1 input[type='checkbox']").prop({
checked: true
});
</script>
</div>

<div class="col-lg-6">
<h3>Деактивировать</h3> 
<input id="ch2" type="checkbox" class="form-control" checked />
<script>
$("#ch2").prop("checked", false);
</script>
</div>

<div class="col-lg-6" id="ch21">
<h3>Деактивировать все</h3> 
<div class="col-lg-2"><input id="ch21" type="checkbox" class="form-control" checked /></div>
<div class="col-lg-2"><input id="ch22" type="checkbox" class="form-control" checked /></div>
<div class="col-lg-2"><input id="ch23" type="checkbox" class="form-control" checked /></div>
<script>
$("#ch21 input[type='checkbox']").prop({
checked: false
});
</script>
</div>

<div class="col-lg-6">
<h3>Разблокировать</h3> 
<input id="ch3" type="checkbox" class="form-control" checked disabled/>
<script>
$("#ch3").prop("disabled", false);
</script>
</div>

<div class="col-lg-6" id="ch31">
<h3>Разблокировать все</h3> 
<div class="col-lg-2"><input id="ch31" type="checkbox" class="form-control" checked disabled /></div>
<div class="col-lg-2"><input id="ch32" type="checkbox" class="form-control" disabled /></div>
<div class="col-lg-2"><input id="ch33" type="checkbox" class="form-control" disabled /></div>
<script>
$("#ch31 input[type='checkbox']").prop({
disabled: false
});
</script>
</div>

<div class="col-lg-6">
<h3>Заблокировать</h3> 
<input id="ch4" type="checkbox" class="form-control" checked/>
<script>
$("#ch4").prop("disabled", true);
</script>
</div>

<div class="col-lg-6" id="ch41">
<h3>Заблокировать все</h3> 
<div class="col-lg-2"><input id="ch41" type="checkbox" class="form-control" checked /></div>
<div class="col-lg-2"><input id="ch42" type="checkbox" class="form-control" /></div>
<div class="col-lg-2"><input id="ch43" type="checkbox" class="form-control" /></div>
<script>
$("#ch41 input[type='checkbox']").prop({
disabled: true
});
</script>
</div>

<div class="col-lg-6">
<h3>Проверка состояния</h3> 
<input class="ch5" type="checkbox" class="form-control" checked />
<p></p>
<script>
$(function() {
if ($( '.ch5' ).is( ':checked' )) {
$( 'p' ).text( 'Aктивен' );
}
});
</script>
</div>

<div class="col-lg-6">
<h3>Проверка изменения состояния</h3> 
<input class="ch6" type="checkbox" class="form-control" />
<strong>Проверка</strong>
<script>
$(function() {
$( '.ch6' ).on( 'click', function() {
if($(this).is( ':checked' )) {$('strong').text( 'Aктивен' ); }
else {$( 'strong' ).text( 'Не активен' );}
})
});
</script>
</div>

</div>

BootstrapTema

Управление checkbox с помощью jQuery

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0