Как ограничить выбор checkbox в Tilda

Create Something

Quisque id tincidunt dui augue. Suspendisse non lorem vel diam consectetur posuere. Nam eu enim gravida risus vehicula posuere.

Documantation

Get in touch

Please complete the form and we will get back to you.
Only three option ))

Privacy Policy | Terms & Conditions

Как ограничить выбор checkbox в Tilda

1

Создали ZeroBlock и добавили в него Form

2

Создали поле Question with answers

3

Задали имя этому полю mycheck

4

Добавили код в блок Т123
В коде указали имя нашего поля
var chkName = 'mycheck';
И лимит выбора
length>=3

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Делаем ограничение на кол-во выбранных галочек в форме. Работаем с несколькими формами.
Длительность видео: 28 минут

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера

Выбор галочками


<script>
$(document).ready(function() {
var chkName = 'mycheck';
 $(document).on('change',  $('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-checkbox')    ,function(e){     
    if($('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-checkbox:checked').length>=3){ 
        $('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-checkbox:not(:checked)').attr("disabled", true);
    }else{ $('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-checkbox:disabled').attr("disabled", false);
    };
  });
});
</script>

Библиотека для примера

выбор с картинками


<script>
$(document).ready(function() {
var chkName = 'mycheck';
 $(document).on('change',  $('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-img-select')    ,function(e){     
    if($('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-img-select:checked').length>=3){ 
        $('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-img-select:not(:checked)').attr("disabled", true);
    }else{ $('input[name="'+chkName+'"]').closest('.t-input-block').find('.t-img-select:disabled').attr("disabled", false);
    };
  });
});
</script>