Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как ограничить выбор checkbox в Tilda
Create Something
Quisque id tincidunt dui augue. Suspendisse non lorem vel diam consectetur posuere. Nam eu enim gravida risus vehicula posuere.
Get in touch
Please complete the form and we will get back to you.
Only three option ))

Как ограничить выбор 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>
Latest news
Made on
Tilda