Как добавить класс к div если активен определенный input?

Question

[Владимир]

Есть методы оплаты в формате input
Есть кнопка "Подтвердить заказ"

По умолчанию выбран первый input "no-payment"

Необходимо добавить класс к кнопке "Подтвердить заказ", когда выбран именно первый инпут "no-payment", в этом классе будут прописаны стили и кнопка будет неактивной.

<div class="payment-list">
	<li class="payment">
		<input id="no-payment" type="radio" class="input-radio" name="payment_method" value="no-payment" checked="checked">
	</li>

	<li class="payment2">
		<input id="money" type="radio" class="input-radio" name="payment_method" value="money" >
	</li>

	<li class="payment3">
		<input id="ucassa" type="radio" class="input-radio" name="payment_method" value="ucassa" >
	</li>
</div>

<div class="send-box">
	<button type="submit" class="button-send" name="checkout_place_order" id="place_order">Подтвердить заказ</button>
</div>

Answer 1

[Сергей delphinpro]

просто из интереса, без javascript:

.payment-list:has(#no-payment:checked) + .send-box > .button-send {
  pointer-events: none; /* Предотвратить клики */
  …любые другие стили для обозначения неактивного состояния.
}

Comments

[Владимир]

Там структура чуть побольше, я специально упростил чтобы здесь сильно не ковыряли. По факту выглядит вот так:

<div id="payment" class="woocommerce-checkout-payment">
    <h3>Способ оплаты</h3>
			<ul class="wc_payment_methods payment_methods methods">
					
			<li class="wc_payment_method payment_method_alg_custom_gateway_1">
	<input id="payment_method_alg_custom_gateway_1" type="radio" class="input-radio" name="payment_method" value="alg_custom_gateway_1" checked="checked" data-order_button_text="">

	<label for="payment_method_alg_custom_gateway_1">
		Не выбран 	</label>
	</li>
<li class="wc_payment_method payment_method_bacs">
	<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="">

	<label for="payment_method_bacs">
		Перевод на расчетный счет 	</label>
			<div class="payment_box payment_method_bacs" style="display:none;">
			<p>Свяжитесь, пожалуйста, с менеджерами интернет-магазина (Служба заботы о клиентах), чтобы получить счет или реквизиты для оплаты.</p>
		</div>
	</li>
<li class="wc_payment_method payment_method_cod">
	<input id="payment_method_cod" type="radio" class="input-radio" name="payment_method" value="cod" data-order_button_text="">

	<label for="payment_method_cod">
		Наличными или банковской картой при получении 	</label>
			<div class="payment_box payment_method_cod" style="display:none;">
			<p>При доставке курьерской службой СДЭК или Почтой России. Данный способ оплаты недоступен при выборе доставки транспортной компанией DHL.</p>
		</div>
	</li>
<li class="wc_payment_method payment_method_yookassa_epl">
	<input id="payment_method_yookassa_epl" type="radio" class="input-radio" name="payment_method" value="yookassa_epl" data-order_button_text="">

	<label for="payment_method_yookassa_epl">
		ЮKassa (банковские карты, электронные деньги и другое) <img src="https://tigristoe.com/wp-content/plugins/yookassa//assets/images/kassa.png" alt="ЮKassa (банковские карты, электронные деньги и другое)">	</label>
			<div class="payment_box payment_method_yookassa_epl" style="display:none;">
			<p>ЮKassa (банковские карты, электронные деньги и другое)</p>
		</div>
	</li>
		</ul>
		<div class="form-row place-order">
		<noscript>
			Поскольку ваш браузер не поддерживает JavaScript или в нем он отключен, просим убедиться в том, что вы нажали кнопку <em>Обновить итог</em> перед регистрацией заказа. Иначе, есть риск неправильного подсчета стоимости.			<br/><button type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="Обновить итог">Обновить итог</button>
		</noscript>

			<div class="woocommerce-terms-and-conditions-wrapper">
		<div class="woocommerce-privacy-policy-text"><p>Ваши личные данные будут использоваться для обработки ваших заказов, упрощения вашей работы с сайтом и для других целей, описанных в нашей <a href="https://tigristoe.com/privacy/" class="woocommerce-privacy-policy-link" target="_blank">политика конфиденциальности</a>.</p>
</div>
			</div>
	
		
		<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Подтвердить заказ" data-value="Подтвердить заказ">Подтвердить заказ</button>
		
		<input type="hidden" id="woocommerce-process-checkout-nonce" name="woocommerce-process-checkout-nonce" value="674ae5a02f"><input type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review">	</div>
</div>

Пробовал вот так через css задать, но не сработало:

ul.wc_payment_methods.payment_methods.methods:has(#payment_method_alg_custom_gateway_1:checked) + .form-row.place-order > .woocommerce-terms-and-conditions-wrapper > .button{
  pointer-events: none; /* Предотвратить клики */
  background:#000;
}

[Сергей delphinpro]

Владимир, Вы код вообще не форматируете что ли? =) Ну неудобно же читать...

[Владимир]

Сергей delphinpro, из консоли вытащил, он же Вордпрессом формируется:)

<div id="payment" class="woocommerce-checkout-payment">
  <h3>Способ оплаты</h3>
  <ul class="wc_payment_methods payment_methods methods">

    <li class="wc_payment_method payment_method_alg_custom_gateway_1">
      <input id="payment_method_alg_custom_gateway_1" type="radio" class="input-radio" name="payment_method" value="alg_custom_gateway_1" checked="checked" data-order_button_text="">

      <label for="payment_method_alg_custom_gateway_1">
        Не выбран </label>
    </li>
    <li class="wc_payment_method payment_method_bacs">
      <input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="">

      <label for="payment_method_bacs">
        Перевод на расчетный счет </label>
      <div class="payment_box payment_method_bacs" style="display:none;">
        <p>Свяжитесь, пожалуйста, с менеджерами интернет-магазина (Служба заботы о клиентах), чтобы получить счет или реквизиты для оплаты.</p>
      </div>
    </li>
    <li class="wc_payment_method payment_method_cod">
      <input id="payment_method_cod" type="radio" class="input-radio" name="payment_method" value="cod" data-order_button_text="">

      <label for="payment_method_cod">
        Наличными или банковской картой при получении </label>
      <div class="payment_box payment_method_cod" style="display:none;">
        <p>При доставке курьерской службой СДЭК или Почтой России. Данный способ оплаты недоступен при выборе доставки транспортной компанией DHL.</p>
      </div>
    </li>
    <li class="wc_payment_method payment_method_yookassa_epl">
      <input id="payment_method_yookassa_epl" type="radio" class="input-radio" name="payment_method" value="yookassa_epl" data-order_button_text="">

      <label for="payment_method_yookassa_epl">
        ЮKassa (банковские карты, электронные деньги и другое) <img src="https://tigristoe.com/wp-content/plugins/yookassa//assets/images/kassa.png" alt="ЮKassa (банковские карты, электронные деньги и другое)"> </label>
      <div class="payment_box payment_method_yookassa_epl" style="display:none;">
        <p>ЮKassa (банковские карты, электронные деньги и другое)</p>
      </div>
    </li>
  </ul>
  <div class="form-row place-order">
    <noscript>
      Поскольку ваш браузер не поддерживает JavaScript или в нем он отключен, просим убедиться в том, что вы нажали кнопку <em>Обновить итог</em> перед регистрацией заказа. Иначе, есть риск неправильного подсчета стоимости.
      <br/>
      <button type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="Обновить итог">Обновить итог</button>
    </noscript>

    <div class="woocommerce-terms-and-conditions-wrapper">
      <div class="woocommerce-privacy-policy-text">
        <p>Ваши личные данные будут использоваться для обработки ваших заказов, упрощения вашей работы с сайтом и для других целей, описанных в нашей <a href="https://tigristoe.com/privacy/" class="woocommerce-privacy-policy-link" target="_blank">политика конфиденциальности</a>.</p>
      </div>
    </div>

    <button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Подтвердить заказ" data-value="Подтвердить заказ">Подтвердить заказ</button>

    <input type="hidden" id="woocommerce-process-checkout-nonce" name="woocommerce-process-checkout-nonce" value="674ae5a02f">
    <input type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review"> </div>
</div>

[Сергей delphinpro]

Владимир,

[Владимир]

Сергей delphinpro, спасибо, решает проблему!

[Сергей delphinpro]

Владимир, Я бы не стал пока это применять в реальном проекте. Написал же - из интереса.
https://caniuse.com/css-has
Вот когда FF подтянется, тогда уже можно будет осторожно применять этот селектор.

[Владимир]

Сергей delphinpro, понял, спасибо. Попробую еще решение на js поискать

[Сергей delphinpro]

Владимир, как-то так

const submit = document.querySelector('#payment input[type=submit]');
document.querySelectorAll('#payment input[type=radio]').forEach(input => {
    input.addEventListener('change', () => {
      let checked = document.querySelector('#payment input[type=radio]:checked');
      if (checked) {
          submit.disabled = checked.value === 'alg_custom_gateway_1';
      }
    })
});

[Владимир]

Сергей delphinpro, почему то не срабатывают решения на js в корзине вп

Класс не смог добавить кнопке на js, потому что после клика по радио кнопке div#payment удаляется из DOM и вместо него создается новый. Решение выше тоже не отрабатывает, сейчас поставил его

[Сергей delphinpro]

Владимир, тогда нужно смотреть куда уходит запрос
https://tigristoe.com/?wc-ajax=update_order_review
как он обрабатывается. И уже там, в серверном коде делать кнопку неактивной при необходимости. Javascript тут не поможет, вся обработка делается на сервере.