Блог

Мне трудно найти именно то, что я ищу, скорее всего, потому, что я не уверен, как правильно выразить это в поиске Google.

В основном то, что я хотел бы сделать, это отобразить около 30 кнопок, которые затем смогут выбирать пользователи. После выбора кнопка меняет цвет, указывая, что выбран конкретный вариант. Пользователи должны выбрать 10 из 30 вариантов. Затем результаты должны быть агрегированы (в основном с учетом каждой выбранной уникальной кнопки) и отображены другому пользователю, который может войти в систему и просмотреть результаты.

Несколько пользователей должны иметь возможность выбирать эти параметры и записывать свои результаты.

Я не собираюсь создавать выпадающий список, мультисписок или решение с флажками. В моих исследованиях до сих пор я нашел множество ссылок на этот тип опций. Кроме того, Javascript ограничивает минимальное / максимальное количество флажков, которые может выбрать пользователь.

Я надеюсь, что это имеет смысл. Любая помощь в определении наилучшего метода для решения этой задачи была бы весьма признательна.

Спасибо,

-Натан

Что вы можете сделать, вы можете создать 30 кнопок и подключить каждую кнопку к скрытому флажку, затем вы можете опубликовать ее на сервере, например.

 <input type="checkbox" value="1" name="chk_one" id="chk_one" style="display: none;">
<input type="button" value="Check Box One" id="btn_one"/>
  

CSS

 input[type="button"].selected { color: red; }
input[type="button"] { color: black; }
  

затем вы можете написать решение jQuery, чтобы заставить его менять цвета:

 var _minLength = 10;
var _maxLength = 30;
    $(document).ready(function() {
        $('#submit_id').click(function() { 
           if($('#form_id input[type="checkbox"]').is(':checked').length < _minLength) 
            { 
              alert('you need to select at least '   _minLength   ' of buttons'); return false; 
            };});
        $('#form_id input [type="button"]').click(function() {
            var _id = $(this).attr('id').toString().split('_')[1];
            if(_id != null)
            {
               var _chckBox = $('#chk_' _id);
               var _newState =  _checkBox.attr('checked') ? false, true;
               if($('#form_id input[type="checkbox"]').is(':checked').length 1 > _maxLength)
                  return;


               _checkBox.attr('checked', _newState);
               if(_checkBox.attr('checked'))
                  $(this).addClass('selected');
               else
                  $(this).removeClass('selected');
             }
        });
    });
  

Метод сверху прикрепит событие щелчка к каждой кнопке в области, указанной вами с помощью «#form_id», затем при нажатии он переключит состояние скрытого флажка и установит или удалит класс из кнопки, это зависит от состояния флажка.

И, кстати, количество флажков не ограничено.