Как сделать, чтобы checkbox и label на странице отображались только после выбора пункта в модальном окне?

Question

[ian14]

Здравствуйте, друзья! Пишу этот пост, практически отчаявшись решить проблему самостоятельно. Многочасовые поиски в гугле и попытки что-либо сделать методом тыка на фоне недостаточных знаний к положительному результату не привели. Ситуацию усугубляет то, что поджимают сроки, а фрилансер, обещавший решить эту проблему, получил предоплату и исчез :(

Возможно, я изначально усложнил себе задачу, но другого варианта реализации идеи я не увидел.

Ситуация такова:

1. Есть сайт на Вордпресс.
2. На сайте используется плагин недвижимости.
3. У плагина есть виджет с формой поиска.
4. В виджете есть поле с чекбоксами (которое я уже использовал для создания карты метро посредством установки бэкграунда и позиционирования элементов).
5. Карта метро выводится в модальном окне шорткодом того же виджета поиска, что присутствует на странице (остальные элементы кроме нужного поля просто отключены в этом окне через display: none).
6. Нужно сделать так, чтобы при выборе станции метро в модальном окне выбранный элемент появлялся в самом виджете поиска, т.е. изначально он должен быть невидим.

Таким образом на странице вижета удалось отключить только неактивные кнопки чекбокса, но не неактивные элементы label (сейчас при выборе пункта в модальном окне чекбокс на странице появляется, как и должно быть по задумке):

aside#widget input[type="checkbox"]:checked {display: inline-block;}
aside#widget input[type="checkbox"] {display: none;}

Нужно сделать так, чтобы на странице виджета были невидимы не только неактивные checkbox, но и label, а при выборе в модальном окне они появлялись.

В общем, пока все. Простите автору его нубство и помогите, чем сможете. Заранее спасибо!

Comments

[alex]

Если я правильно понял, у вас чекбоксы завернуты в label. Тогда вы label не отключите. Ну средствами CSS по крайней мере. Можно отключить вот так — input[type=checkbox] + label {display: none}, а label с чекбоксом связать через атрибут for="checkbox_id". Вы бы лучше код выложили онлайн куда-нибудь или ссылку на сайт дали, а то довольно сложно понять что вам нужно.

[alex]

чтобы сработал такой селектор input[type=checkbox] + label, нужно чтобы в разметке, label, шёл СРАЗУ после чекбокса, а у вас после label идет span, затем чекбокс. тут два варианта: либо label span input оберните в контейнер и используйте селектор input[type=checkbox] ~ label; либо, как я уже сказал выше - ставьте label сразу после чекбокса

[ian14]

Alex: спасибо большое! Вот теперь получилось. Прописываю для каждого чекбокса по две подобных строчки - "input#chk6_select_field_3009_1 ~ label[for="chk6_select_field_3009_1"] {display: none}" и " input#chk6_select_field_3009_1:checked ~ label[for="chk6_select_field_3009_1"] {display: inline-block;}"

и все работает, исчезает/появляется, как я и хотел. Вы мне очень помогли!

Со спокойной душой отправляюсь копипастить оставшиеся 300 пунктов :) Доброй ночи!

[alex]

Чтобы не копипастить можно еще вот такой селектор попробовать input + span + label {...}