Я хотел бы ограничить количество выбранных категорий (максимум 3) в списке категорий WordPress.
Но Gutenberg использует интерфейс React и мой jQuery код не работает.
Могу я вам помочь?
jQuery(window).load(function() {
var limit = 3;
$('.edit-post-sidebar input.components-checkbox-control__input').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
});
Я нашел эту часть кода в components.js
файле WordPress:
function CheckboxControl(_ref) {
var label = _ref.label,
className = _ref.className,
heading = _ref.heading,
checked = _ref.checked,
help = _ref.help,
onChange = _ref.onChange,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["label", "className", "heading", "checked", "help", "onChange"]);
var instanceId = Object(external_this_wp_compose_["useInstanceId"])(CheckboxControl);
var id = "inspector-checkbox-control-".concat(instanceId);
var onChangeValue = function onChangeValue(event) {
return onChange(event.target.checked);
};
return Object(external_this_wp_element_["createElement"])(base_control, {
label: heading,
id: id,
help: help,
className: className
}, Object(external_this_wp_element_["createElement"])("span", {
className: "components-checkbox-control__input-container"
}, Object(external_this_wp_element_["createElement"])("input", Object(esm_extends["a" /* default */])({
id: id,
className: "components-checkbox-control__input",
type: "checkbox",
value: "1",
onChange: onChangeValue,
checked: checked,
"aria-describedby": !!help ? id + '__help' : undefined
}, props)), checked ? Object(external_this_wp_element_["createElement"])(build_module_icon["a" /* default */], {
icon: check["a" /* default */],
className: "components-checkbox-control__checked",
role: "presentation"
}) : null), Object(external_this_wp_element_["createElement"])("label", {
className: "components-checkbox-control__label",
htmlFor: id
}, label));
}
![enter image description here](https://i.stack.imgur.com/dBM0U.png)