jQuery отключение функции ввода запрещает загрузку выбранной опции

Question

У меня странная проблема, и я не могу понять, что именно ее вызывает. Когда выбран один конкретный параметр в выборе, отдельный вход должен быть отключен. Для всех остальных параметров вход должен быть включен. У меня это работает. Однако при первой загрузке страницы этот же параметр, который отключает ввод, предварительно выбирается с помощью PHP: тег параметра содержит selected="selected", но не загружается в раскрывающемся списке выбора. Вместо этого загружается первая и пустая опция, и из-за атрибута required вокруг раскрывающегося списка выбора появляется красная рамка.

Вот это jQuery:

/* disable the 'subprice' input on the project form if vendorID is '1' */
$('#vendorID').change(function() {
    if($(this).val() == '1') {
        $('#subprice').attr('disabled', 'disabled');
    }
    else {
        $('#subprice').removeAttr('disabled', 'disabled');
    }
}).change();

Вот фрагмент раскрывающегося списка выбора (сгенерированный HTML):

<select required name="vendorID" id="vendorID">
    <option value=""> - </option>
    <option selected="selected" value="1">.....</option>
    <option value="2">.....</option>
    <option value="3">.....</option>

Это вход, который отключается / включается:

<input type="text" name="subprice" id="subprice" value="" />

Я пытаюсь переписать старую функцию (обычную JavaScript) в jQuery. Старая функция работает отлично. Я просто хочу немного модернизировать и упростить мой код.

function toggleSubprice() {
   var subprice = document.getElementById("subprice");
   var cheeseus = document.getElementById("cheeseus");
   updateToggle = cheeseus.selected ? subprice.disabled = true : subprice.disabled = false;
}

Идентификатор "cheeseus" добавляется к опции, используя PHP:

<option value="<?php echo $vendor->vendorID; ?>"<?php echo (($vendor->vendorID == '1')? " id=\"cheeseus\"" : ""); ?>

РЕДАКТИРОВАТЬ: я заметил что-то, что связано со странным поведением. Когда я выбираю Проверять элемент в Firefox, пустой параметр отображается как имеющий свойство selected="selected", что является нечетным. Опция, которая имеет значение «1», должна иметь его. И когда я просматриваю страницу источника, это делает . Смотрите два дополнительных скриншота.

Answer 1

Проблема решена! Код, который работает следующим образом:

if($("#vendorID").length > 0) {
    toggleSubprice();
    $('#vendorID').on('change', toggleSubprice);
}

Выше указано внутри $(document).ready(function().

Снаружи это сама функция:

function toggleSubprice() {
   var $vendorID = $('#vendorID');
   var $subrpice = $('#subprice');
   if($vendorID.val() == '1') {
      $subrpice.prop("disabled", true);
      console.log('subprice disabled');
   } else {
      $subrpice.prop("disabled", false);
      console.log('subprice enabled');
   }

}

Конечно, часть console.log() не обязательна. Я только добавил его, чтобы иметь возможность отслеживать, выполняется ли функция, потому что в какой-то момент ее не было.

Уверен, что существует более элегантное решение, поэтому, если кто-то хочет его улучшить, сделайте.