Добавить обязательный атрибут, когда радио проверено

У меня есть набор переключателей под названием «цена». Когда выбран переключатель «€», я хочу сосредоточиться на поле ввода текста, и это поле ввода текста должно быть обязательным. Когда я выбираю другую опцию, обязательный атрибут должен быть удален.

Возможно ли это через Javascript или jQuery? Я нашел здесь фрагмент jQuery, но, похоже, он не работает. Это то, что у меня есть сейчас:

<input type="radio" name="price" value="value" id="value_radio" onclick="document.getElementById('value_input').focus()" required>

<label for="value_input">&euro;</label>
<input type="text" name="price_value" id="value_input" pattern="\d+(,\d{1,2})?" 
    onclick="document.getElementById('value_radio').checked=true">

<script>
    $('#value_radio').change(function () {
        if($(this).is(':checked')) {
            $('#value_input').attr('required');
        } else {
            $('#value_input').removeAttr('required');
        }
    });
</script>

<input type="radio" name="price" id="free" value="free">
<label for="free">Free</label>

JSFiddle: http://jsfiddle.net/fhfrzn1d/


javascript required
person Wouter C    schedule 16.08.2014    source источник
comment
добавить ) после .is(':checked') это серьезная ошибка. чем двигаться вперед   -  person Hushme    schedule 16.08.2014
comment
и используйте лучший редактор для кодирования   -  person Hushme    schedule 16.08.2014
comment
Спасибо. Тем не менее, это все еще не работает ... и я думаю, что тогда мне следует сбросить Sublime Text: p   -  person Wouter C    schedule 16.08.2014
comment
используйте возвышенное, но вы должны использовать соответствующий плагин js для проверки ошибок   -  person Hushme    schedule 16.08.2014

Ответы (2)


arrow_upward
6
arrow_downward

Согласно этому ответу, вы должны отслеживать изменения на обоих радиовходах. Так что переместите свой javascript-скрипт после второго радио.

Также не хватало )

Скрипт обновлен: http://jsfiddle.net/fhfrzn1d/1/

$('input[name="price"]').change(function () {
    if($("#value_radio").is(':checked')) {
        $('#value_input').attr('required', true);
    } else {
        $('#value_input').removeAttr('required');
    }
});
person Volune    schedule 16.08.2014
comment
также вам нужно изменить щелчок вашего элемента #value_input на что-то вроде document.getElementById('value_radio').click();, чтобы правильно вызвать обработчик изменений. - person James; 16.08.2014

arrow_upward
2
arrow_downward

У вас есть две (на самом деле три) ошибки в вашем коде.

Первый. Недопустимый синтаксис. Вы должны исправить закрывающую скобку, как рекомендует @Hushme в комментариях.

Первый (2). Использование вами jsfiddle также недопустимо. Вы должны вставить код в раздел JavaScript сайта, а также включить библиотеку jQuery.

Во-вторых. $('#value_input').attr('required') не создает атрибут; это геттер. Вы должны использовать правильный сеттер:

$('#value_input').attr('required', true);

Третье. Событие изменения радиокнопки не запускается, когда пользователь отменяет выбор радиокнопки. Таким образом, вы должны обрабатывать события на всех кнопках:

$('input[name="price"]').change(function () { ... });

Я исправил ваш jsfiddle, см. http://jsfiddle.net/fhfrzn1d/4/

person ForNeVeR    schedule 16.08.2014