Включение / отключение переключателей в соответствии с состоянием флажка

Question

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

Я попытался включить переключатели с помощью селектора jquery :radio[name=vid], но он не работает.

<form action='matrix.php' method='post' id='formanal' name='formanal'>
    <ul class="desc">
        <li><label><input type="checkbox" id ="1" value="Couleur des tarses" name="1">Couleur des tarses</label></li>
        <ul>
            <li class="valeur"><label><input type="radio" value="1-1" id="1-1" name="v1" disabled>Jaunes</label></li>
            <li class="valeur"><label><input type="radio" value="1-2" id="1-2" name="v1" disabled>Blancs</label></li>
        </ul>
    </ul>
    ...
    <ul class="desc">
        <li><label><input type="checkbox" id ="8" value="Forme des ailes" name="8">Forme des ailes</label></li>
        <ul>
            <li class="valeur"><label><input type="radio" value="8-15" id="8-15" name="v8" disabled>Pliées en long</label></li>
            <li class="valeur"><label><input type="radio" value="8-16" id="8-16" name="v8" disabled>Étalées en toit</label></li>
        </ul>
    </ul>
    <input type='submit' name='action' value='Valider'></div>
</form>

$(document).ready(function() {
    $("form input:checkbox").change(function() {
        var vid = 'v' + this.id;
        var etat = $(this).prop('checked');
        if (etat) {
            $(':radio[name=vid]').prop('disabled', false);
        } else {
            $(':radio[name=vid]').prop('checked', false);
            $(':radio[name=vid]').prop('disabled', true);
        }
    });
});

При создании переключатели отключаются, но щелчок по соответствующему флажку не активирует их. Заранее спасибо за любую подсказку.

Answer 1

В JQuery вам нужно получить радиокнопки от родителя <ul> из checkbox, например: $(this).closest('ul').find("input[type='radio']")

$(function () {
        $("form input[type='checkbox']").change(function() {

            if ($(this).is(":checked")){
                $(this).closest('ul').find("input[type='radio']").prop('disabled', false);
            }
            else {
                $(this).closest('ul').find("input[type='radio']").prop('disabled', true);
                $(this).closest('ul').find("input[type='radio']").prop('checked', false);
            }

        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='matrix.php' method='post' id='formanal' name='formanal'>
    <ul class="desc">
        <li><label><input type="checkbox" id ="1" value="Couleur des tarses" name="1"> Couleur des tarses</label></li>
        <ul>
            <li class="valeur"><label><input type="radio" value="1-1" id="1-1" name="v1" disabled> Jaunes</label></li>
            <li class="valeur"><label><input type="radio" value="1-2" id="1-2" name="v1" disabled> Blancs</label></li>
        </ul>
    </ul>
    <ul class="desc">
        <li><label><input type="checkbox" id ="8" value="Forme des ailes" name="8"> Forme des ailes</label></li>
        <ul>
            <li class="valeur"><label><input type="radio" value="8-15" id="8-15" name="v8" disabled> Pliées en long</label></li>
            <li class="valeur"><label><input type="radio" value="8-16" id="8-16" name="v8" disabled> Étalées en toit</label></li>
        </ul>
    </ul>
</form>

Answer 2

Я бы сделал что-то подобное. Вам даже не нужен JQuery ...

var checkbox1 = document.getElementById("1");
var option1 = document.getElementById("1-1");
var option2 = document.getElementById("1-2");

changeDisabledState = () => {
  if (checkbox1.checked == true) {
    option1.disabled = false;
    option2.disabled = false;
  } else {
    option1.disabled = true;
    option2.disabled = true;
    option1.checked = false;
    option2.checked = false;
  }
};

checkbox1.addEventListener("click", changeDisabledState);

Answer 3

Ваша проблема здесь в конкатенации, вы должны конкатить, чтобы добавить переменную vid в ваш селектор, в javascript оператор конкатенации равен +

Ваш код должен быть таким:

$(document).ready(function() {
    $("form input:checkbox").change(function() {
        var vid = 'v' + this.id;
        var etat = $(this).prop('checked');
        if (etat) {
            $(':radio[name='+vid+']').prop('disabled', false);
        } else {
            $(':radio[name='+vid+']').prop('checked', false);
            $(':radio[name='+vid+']').prop('disabled', true);
        }
    });
});

Надеюсь, это поможет вам