2
<input id="a" type="radio" hidden/>
{!! Form::number('aa', null, ['id'=>'aA', 'disabled'=>true]) !!}
{!! Form::number('bb', null, ['id'=>'bB', 'disabled'=>true]) !!}
<input id="c" type="radio" hidden/>
{!! Form::number('dd', null, ['id'=>'dD', 'disabled'=>true]) !!}

Как сделать, чтобы при нажатии на radio "a" были активными инпуты "aa","bb"? А при нажатии на radio "c" были активными инпуты "dd"?

<script>
    $('input[id="a"]').on('click', function() {
        if ($(this).val() === 'checked') {
            $('[id="aA"]').removeProp("disabled");
            $('[id="bB"]').removeProp("disabled");
        }
        else {
            $('[id="aA"]').prop("disabled", "disabled");
            $('[id="bB"]').prop("disabled", "disabled");
        }
    });
</script>

Не помогло..
upd. вижу if(здесь ошибку), как проверять, "активен" ли radio? :onchecked?

1
  • 1
    А что у вас за атрибут такой hidden?
    – Visman
    22 мая 2017 в 13:06

2 ответа 2

2

Если разбить disabled input-ы на группы (например, с помощью классов) и привязать каждый radio button к конкретной группе (например, с помощью data-атрибута), то можно сделать так:

$(function() {
  $(":radio").on("click", function() {
    var dataClass = $(this).data("class");
    $(".js-all").each(function() {
        this.disabled = !$(this).hasClass(dataClass);
    });
  });
});
<input id="a" type="radio" name="myname" data-class="js-a" />a<br/>
<input class="js-all js-a" disabled/><br/>
<input class="js-all js-a" disabled/><br/>
<input id="c" type="radio" name="myname" data-class="js-c"/>c<br/>
<input class="js-all js-c" disabled/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Учитывая что клик по radio button уже говорит о том, что он выбран, остаётся только активировать нужные input и заблокировать остальные.

Radio button-ы имеют одинаковое name, дабы выбор одного из них приводил к снятию выбора с других.

2
  • спасибо, то, что нужно! можно ли таким образом расширить функцию, чтобы прятать-показывать div-блоки? jsfiddle.net/ua3hrhd1 вот моя попытка, но теперь активный radio прячет все, что к нему не относится
    – Tarasovych
    22 мая 2017 в 16:37
  • 1
    @Tarasovych на здоровье. Так как disabled надо делать для одних элементов, а hidden - для других, то имеет смысл разнести их в разные группы. Например, сделать как-то так.
    – Regent
    22 мая 2017 в 16:58
2

Можете проверять вот так внутри события по клику:

if ($(this).is(':checked')) {

Вместо:

if ($(this).val() === 'checked')
4
  • для этого нужно повесить на radio-инпут unchecked?
    – Tarasovych
    22 мая 2017 в 13:18
  • 1
    нет, он по умолчанию же не отмечен
    – TheMY3
    22 мая 2017 в 13:27
  • сейчас disabled исчезает, если активен radio, но если radio не активен, disabled не возвращается jsfiddle.net/ysx0ysqe/5
    – Tarasovych
    22 мая 2017 в 14:25
  • 1
    @Tarasovych потому что у вас элемент только 1 и с него не снять checked, это же не checkbox, или меняйте на checkbox но тогда не много придется переписать js, или на id="c" тоже надо писать js.
    – TheMY3
    22 мая 2017 в 14:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.