Отключить / включить кнопку отправки на основе выпадающего списка и списков условий

Question

Я пытаюсь отключить и включить кнопку отправки на основе элемента, выбранного в раскрывающемся списке, и элементов, прикрепленных / привязанных к элементу в раскрывающемся списке.

Кнопка отправки должна быть отключена при начальной загрузке формы.

Если в раскрывающемся списке выбран «выбрать элемент», кнопка отправки должна оставаться отключенной

Если допустимый элемент выбирается из peppiRole DROPDOWN , связанный список загружается в «существующиеPeppiRole» на основе выбора (peppiRole). Элементы в существующем элементе «pePiRole» должны быть оценены, ЕСЛИ они соответствуют минимальным требованиям (какое-то значение / элемент или не пустой), И текст был введен в поле «причина», ТОГДА кнопка SUBMIT должна быть включена .

Если из выпадающего списка (peppiRole) выбран другой элемент,

элементы в существующем PeppiRole должны быть оценены, чтобы убедиться, что он не пустой (соответствует минимуму). требование),

И текст был введен в поле «причина» (не пусто),

ТОГДА кнопка SUBMIT должна быть включена. ЕСЛИ текст в поле причины удален, ОТПРАВИТЬ кнопка должна стать отключенной .

Ниже приведено то, что у меня есть, кнопка SUBMIT отключена, когда поле «причина» пусто, но я пытаюсь связать выпадающий список (peppiRole) с кнопку отправки, чтобы выполнить требования.

    <?xml version="1.0" encoding="UTF-8"?><provision-request version="3.6.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="ApprovalRequest3_5_1.xsd">
    <form form-id="request_form">
        <content>

<script>
$(document).ready(function() {
     $(':input[id="SubmitAction1"]').prop('disabled', true);
     $('input[id="_reason"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[id="SubmitAction1"]').prop('disabled', false);
        }
     });
 });
</script>

            <field data-type="string" name="existingPeppiRole">
                <control control-type="PickList" editable="false">
                    <props/>
                </control>
                <display-label xml:lang="en">existingPeppiRole</display-label>
            </field>

            <field data-type="string" name="peppiRole">
                <control control-type="GlobalList" editable="true" required="true">
                    <props>

                            <value>peppiRole</value>
                        </prop>
                        <prop name="onchange" type="event">
    <value>  function checkData() {
    var existingPeppiRoles=form.getAllValues("existingPeppiRole");
    var selectedPeppiRole = form.getValues("peppiRole");
    var roleAlreadyAssigned = false;

    for (i=0; i < existingPeppiRoles[0].length;i++) {
        if (selectedPeppiRole.toString() == existingPeppiRoles[0][i].toString()) {
            roleAlreadyAssigned = true;
                  }
            }
             if (roleAlreadyAssigned==true) {
                 alert("Role already exist"); 
               }

        if (selectedPeppiRole.toString() == "peppi.ohjaaja") {
             var otherRoleRequired = true;
             var checkRequirements = ["peppi.staff","peppi.teacher"];
             var otherRoleRequired = checkRequirements.every(elem => existingPeppiRoles[0].indexOf(elem) > -1);
                if(otherRoleRequired == false) {
                     alert("requires peppi.staff ja peppi.teacher");
                        }
                   }

            else if (selectedPeppiRole.toString() == "peppi.resplanner") {
                    var otherRoleRequired = true;
                    var checkRequirements =[ "peppi.planner"];

                    otherRoleRequired = checkRequirements.every(elem => existingPeppiRoles[0].indexOf(elem) > -1);

                if(otherRoleRequired == false) {
                        alert("requires peppi.planner");
                        }
                  }

}

checkData();
</value>
                        </prop>
                    </props>
            <actions location="bottom">
                <action name="SubmitAction">
                    <control control-type="Button" visible="true"/>
                    <display-label xml:lang="en">Submit</display-label>
                </action>
                <action block-on-error="false" name="CancelAction">
                    <control control-type="Button" visible="true"/>
                    <display-label xml:lang="en">Cancel</display-label>
                </action>
            </actions>

<event event-type="onload">function preSubmitValidate(field) 
{
  window.inv=function (invocation) { 
        if (confirm( "Are you sure you want to  submit?")  ) 
               { var result = invocation.proceed(); 
                 return result;
                }; 
        };
        form.interceptAction("SubmitAction", "around", window.inv);

}

//preSubmitValidate("peppiRole");
//onload_form( form )</event>
        </content>
    </form>
</provision-request>

Для получения дополнительной информации см. прикрепленное изображение введите описание изображения здесь

[введите im описание возраста здесь] [2]

Спасибо за ваши ожидаемые предложения, указатели и идеи.