Установите все флажки в праймфейсах

Требование логики:
- У меня есть список флажков (я использую p: selectManyCheckbox).
- У меня также есть флажок, который, если он установлен, также должен быть отмечен другой флажок (я использую p: selectBooleanCheckbox для этого)
- Позвольте мне привести конкретный пример, теперь у меня есть 3 флажка:
+ Выбрать все
+ Элемент 1
+ Элемент 2

Если установлен флажок «выбрать все», будут отмечены «элемент 1» и «элемент 2». Если опция «выбрать все» не отмечена, то «элемент 1» и «элемент 2» не отмечены.
Если один из элементов «элемент 1» или «элемент 2» не отмечен, флажок «выбрать все» должен быть снят. Если отмечены как «элемент 1», так и «элемент 2», флажок «выбрать все» должен быть установлен автоматически.

Чтобы реализовать это, я использую javascript для события onchange каждого флажка.
Для выбора всех onchange = updateOtherCheckboxes (otherCheckboxes, selectAllCheckbox)

function updateCheckboxes(otherCheckboxes, selectAllCheckbox) {
	otherCheckboxes.inputs.each(function() {
		if (selectAllCheckbox.isChecked()) {
			$(this).prop('checked', false);
		} else {
			$(this).prop('checked', true);
		}
		$(this).trigger('click');
	});
}

Для других флажков onchange = updateSelectAllCheckbox (otherCheckboxes, selectAllCheckbox)

function updateSelectAllCheckbox(otherCheckboxes, selectAllCheckbox) {
	var notAllCheckboxesChecked = false;
	otherCheckboxes.inputs.each(function() {
		if ($(this).is(':checked') == false) {
			notAllCheckboxesChecked = true;
			return false;
		}
	});
	if (notAllCheckboxesChecked && selectAllCheckbox.input.is(':checked') == true) {
		selectAllCheckbox.input.trigger('click');
	} else if (!notAllCheckboxesChecked && selectAllCheckbox.input.is(':checked') == false) {
		selectAllCheckbox.input.trigger('click');
	}
}

Проблема здесь в том, что в функции updateCheckboxes () запускается событие щелчка других флажков и вызывается updateSelectAllCheckbox, но я этого не хочу. Итак, как я могу предотвратить вызов функции updateSelectAllCheckbox () в функции updateCheckboxes () после запуска события щелчка.


person nguyenbkcse    schedule 05.10.2018    source источник


Ответы (1)


Вам не нужно вызывать $(this).trigger('check'), потому что это вызовет событие щелчка, ваш предыдущий код $(this).prop('checked', true) уже гарантирует, что флажок будет установлен, поэтому вам больше не нужно запускать событие click.

Если $(this).prop('checked', true) не работает, вы также можете попробовать: $(this).attr('checked', true);

person Sven Hakvoort    schedule 05.10.2018
comment
Привет, Свен, я пробовал без триггера ('щелчок'), но другие флажки не были отмечены / сняты в пользовательском интерфейсе - person nguyenbkcse; 05.10.2018
comment
@nguyenbkcse, я обновил свой ответ другим предложением :) - person Sven Hakvoort; 05.10.2018
comment
Привет, Свен, я тоже попробовал твое новое решение, но оно осталось прежним :( - person nguyenbkcse; 05.10.2018
comment
Не могли бы вы предоставить в своем ответе живой рабочий пример или ссылку на код с рабочим кодом? Так что я могу попробовать кое-что :) - person Sven Hakvoort; 05.10.2018
comment
Извините, но я не могу сейчас предоставить вам свой живой код, потому что я использую простые шрифты, и мне кажется, что нет онлайн-места для тестирования кода простых шрифтов. - person nguyenbkcse; 05.10.2018
comment
У вас есть HTML и CSS, которые вы используете для этого :), если бы вы могли добавить их в свой ответ, этого было бы достаточно @nguyenbkcse - person Sven Hakvoort; 05.10.2018
comment
Я не уверен, что это возможно, потому что в JS-функции я использовал виджет праймфейсов, но если это легко, я вам предоставлю :) - person nguyenbkcse; 05.10.2018
comment
Если бы вы могли это представить, я постараюсь заставить его работать, стоит попробовать :) @nguyenbkcse - person Sven Hakvoort; 05.10.2018