После перезагрузки страницы скрипт работы переключателей перестает выполняться
 

Есть группа переключателей, которые окрашиваются в темно-серый цвет при выборе переключателя :check.

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

Как это можно исправить?

Код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
  let className = 'label-active';
  let $inputs_time = $('#order_time_field input[type=radio]');
  $inputs_time.change(function(ev) {
    $inputs_time.parent('label').removeClass(className);
    $(this).parent('label').addClass(className);
  });
});
</script>
<style type="text/css">
.form-row label.label-active {
	background-color: #e4e4e4;
}
</style>
<div data-priority="20" class="form-row form-row-wide" id="order_time_field">
  <fieldset>
    <legend>Время доставки</legend><label><input type="radio" name="order_time" value="Ближайшее"> Ближайшее</label><label><input type="radio" name="order_time" value="К определенному времени"> К определенному времени</label></fieldset>
</div>

может нет скриптов на этой новой странице?

Тут не нужен JS, достаточно CSS, нужно только изменить верстку.

.form-row input:checked + label {
    background-color: #e4e4e4;
}

<input type="radio" name="order_time" id="i1" value="Ближайшее"> 
<label for="i1">Ближайшее</label>
<input type="radio" name="order_time" id="i2" value="К определенному времени"> 
<label for="i2">К определенному времени</label>

Спасибо, но мне он понадобится, т.к. input планирую скрывать

рони, скрипты есть, просто там 2 вкладки (табы) и когда ошибка срабатывает на втором табе, при перезагрузке страницы перебрасывает на первый и переключатели возвращаются в исходное до js состояние

giwuf, сервер то знает параметр запроса, то есть с какой вкладки он был, а значит может и прописать стили так, чтобы при загрузке сделать вкладку открытой. Можно и клиентом анализировать url определяя какую вкладку открыть

laimas, да, спасибо, но, к сожалению, вкладка работает как переключатель и это второй шаг, т.е. изначально нужно попасть на вкладку 1, а с нее уже переход на 2ую вкладку, где и нужна валидация.
А как клиентом проанализировать url который открыть?

Шаг чего? Если форма отправляется методом post, то url может не принимать параметров (хотя форма может и их задать), но форму то сервер принимает и он должен знать откуда она пришла, это ведь тоже может служить признаком. А значит при ошибках отдать вновь форму с раскрытой вкладкой не должно быть проблемой.

laimas
да, форма отправляется методом post - воспроизвел здесь
https://jsfiddle.net/hwt3Lbec/
Вот так это выглядит на картинке, когда при незаполнении обязательного поля на втором шаге страница перезагружается и перебрасывает на первую вкладку


А вот здесь проверка на ошибку

// Validation: Required fields.
if ( ! empty( $field['required'] ) && empty( $_POST[ $key ] ) ) {
wc_add_notice( sprintf( __( '%s is a required field.', 'woocommerce' ), $field['label'] ), 'error' );
}

Ну господи, какие проблемы. ) Раскрытую/открытую закладку определяют стили, которые клиентом выбираются по щелчку. Но это же может сделать и сервер, отдавая страницу пользователю, достаточно проверять условие, была ли принята форма и есть ли ошибки ее заполнения, то есть пуст ли допустим массив ошибок или некая переменная содержащая ошибку. А так как такой массив/переменная может быть только после приема формы, то достаточно проверять только ее. Отсюда:

вывод кода закладок - кнопка, панель первой закладки - если !$error, значит она открыта по умолчанию (в атрибутах прописаны стили, кнопка выбрана), вывод второй закладки, - если $error, значит делаем эту кнопку открытой (в атрибутах прописаны стили, кнопка выбрана).

Неизвестно что должно быть если форма заполнена верно, но если также должна открываться вторая вкладка, значит для ней проверяется не только ошибки но и POST данные, то есть $_POST || $error - открыть вторую закладку.

Это разве нельзя сделать на сервере?

laimas, спасибо, идея понятна, а вот реализация пока не особо

В каких атрибутах прописать стили, чтобы кнопка была выбрана? И проверка на !$error по скрипту же?

Есть такой атрибут у кнопки, про него шла речь?

aria-selected="true"

Ну как сказать.. я затрудняюсь найти правильную отправную точку куда внедрить функциональную инъекцию, чтобы она не слетела при обновлении движка, плагина или от малейшего чиха.

А здесь все просто - форма отправляет данные и перебрасывает на страницу с инфой по заполнению. К этой части вопросов нет, там все ок.

Ну если клиентский скрипт добавляет/удаляет имя класса, значит где эти имена нужно прописать для раскрытой панели и не прописывать для закрытой, в class="здесь", так ведь? А радио кнопке указывать/нет checked. Типа:

при выводе html первой панели
<tag_name class="<?=!$error ? 'class_name' : null?>"
при выводе html второй панели
<tag_name class="<?=$error ? 'class_name' : null?>"

Ну и другое что необходимо еще также прописать, это по коду своему разберетесь.

Если не понятно как сделать на сервере, что странно, или по каким-то причинам затруднительно, переключайте вкладку на клиенте. Форма отправляется post методом, но запрос адреса, это get запрос. Можно к адресу запроса добавить любой параметр ?xxx, наличие которого проверять при загрузке страницы. Если запрос этой страницы не имеет параметров и заданный формой параметр единственный, то достаточно при загрузке выполнить:

if(location.search) $('order_time_field input:last').click()

laimas,
Посмотрите, плиз, наглядный пример того, о чем пишу.
Попробуйте добавить товар, перейти в таблицу на закладку контактные данные. Переключатели на серой плашке, валидация и выезжающее меню времени работают, но стоит оставить пустым полем телефон и попытаться оформить заявку - страница перезагружается и теперь все скрипты почему-то блокируются и перестают работать, как на картинке ниже. Почему и как это поправить для меня остается большой загадкой..
https://b.radikal.ru/b35/1812/12/e0f45df5f1a3.png

А что означает эта картинка, разве по ней понять что там блокируется?

Выбрал, оформил, телефон пустой или правильный, отправляем, перегружается, видим форму вновь, все работает.

?

laimas
я на картинке красными кружочками выделил плашки которые перестают реагировать на смену цвета при клике на них, например (это иммитация радиобатонов) после перезагрузки или по клику на плашку "к ближайшему времени" перестает открываться выпадающее меню с календарем - у вас не так?
А если уже физически заново перезаходим в корзину (не обновляем страницу), то снова все начинает работать

Я вообще без понятия как там должно быть. :) Да, не изменяет цвет у текущей при выборе оплаты, но при этом на кнопке изменяется текст. Обработчики смотрите, где они у вас? Например, до отправления формы у нее нет обработчиков событий, а после отправления куча.

laimas вот 2 картинки. Должно быть так (как есть до перезагрузки)

а становится так (после перезагрузки страницы)

А как узнать про обработчиков событий?

А кто код пишет, а если пишет то должен знать кому и когда устанавливаются обработчики? Ваш же код, вам ли не знать. Я же просто в отладчике вижу у каких элементов есть обработчики, код которых можно посмотреть прямо в списке.

laimas,
ну код же движка с обработчиками написан не мной, поэтому и затруднительно о них знать.
"Я же просто в отладчике вижу у каких элементов есть обработчики, код которых можно посмотреть прямо в списке."
Подскажите, пожалуйста, что именно видите, может быть это наведет меня на мысль

Даже если не вы разработчик, то как сайт выглядит под разными браузерами вы должны знать, а значит основные браузеры у вас в системе должны быть.
Запустите FF (в нем сразу можно видеть что у кого), запустите отладчик или просто правый щелчок на интересующем элементе и выберите "Исследовать элемент". Откроется инспектор html, в котором будет виден выбранный элемент. Если у каких либо элементов установлены обработчики, то справа от элементов будет кнопка "event", щелчок по которой раскроет список обработчиков, которые в нем же можно и просмотреть как тут https://screenshots.firefox.com/C1qPJci2nOooC4B0/null

Заметьте, что до отправления формы у нее нет обработчиков.

О, laimas, вы красавчик! Не знал, что можно подвязанные event через консоль наблюдать, по крайней мере в хроме такого функционала не видел.
Отвязал скрипт функции проверки и это решило проблему! Еще раз большое вам спасибо за содействие - 1000 плюсов в карму!

function so_27023433_disable_checkout_script(){
    wp_dequeue_script( 'wc-checkout' );
}
add_action( 'wp_enqueue_scripts', 'so_27023433_disable_checkout_script' );

Для Хрома нужно плагин устанавливать, есть такой, а вот как дразнится он я не помню.