Включить / отключить вход по выбору радио с jquery

Question

Форма с переключателями. Если установлен флажок «Существующий», вход «существующий номер» будет включен Он отлично работает в процессе выбора, но не работает на нагрузке. При загрузке ввод «существующий номер» остается отключенным, даже если он «проверен». Это проблематично c при отправке формы и не проходит проверку ошибок. Я попытался добавить .change () в конце и создать функцию, которую я вызвал для готового документа, но это не сработало. Я думаю, что что-то упустил. Возможно, мне нужно сначала получить значение? Я немного нуб.

<input type="radio" name="officephone" value="New" id="officephonenew" >
<label for="officephonenew">New</label><br>

<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked>
<label for="officephoneexisting">Existing</label><br>

<input type="text" name="existingnumber" placeholder="555-555-1234" /><br>

<input type="radio" name="officephone" value="No" id="officephoneno">
<label for="officephoneno">Not required</label>

$('input:radio[name="officephone"]').change(function(){
    $('input[name="existingnumber"]').prop("disabled",true);
    if($(this).attr('value') == 'Existing') {
        $('input[name="existingnumber"]').prop("disabled", false);
    }
});

https://jsfiddle.net/Cormang/sd8xaj9h/10/

Answer 1

Чтобы это работало под нагрузкой, просто используйте filter() для извлечения отмеченной радиокнопки и trigger() событие change на ней.

Также обратите внимание, что вы можете упростить логику c с помощью предоставление логического вывода условия для свойства disabled с использованием val().

$('input:radio[name="officephone"]').change(function() {
  $('input[name="existingnumber"]').prop("disabled", $(this).val() != 'Existing');
}).filter(':checked').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="officephone" value="New" id="officephonenew" />
<label for="officephonenew">New</label><br />

<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked />
<label for="officephoneexisting">Existing</label><br />
<input type="text" name="existingnumber" placeholder="555-555-1234" disabled /><br />

<input type="radio" name="officephone" value="No" id="officephoneno" />
<label for="officephoneno">Not required</label>