multiple select remove disable button if select is not empty-CodePudding

I'm working with multiple select, and i want to remove the attribute disabled button if all select has value, however the "technician" has sub item which is required and other phase don't have sub.

I wan't to remove disable attribute if all select(NO SUB) has value, and select(with sub) has value.

Here's my code:

const type = document.getElementById("empType");
const phase = document.getElementById("phase");
const subPhase = document.getElementById("subPhase");


type.addEventListener("change", appendPhase);

function appendPhase(){
  $("#phase").empty();
  var option = '';
  if(type.value == 1){
      option  = '<option value="0">SELECT</option><option value="1">Trainee</option><option value="2">Acting</option><option value="3">Competency</option>'
  }
  if(type.value == 2){
      option  = '<option value="0">SELECT</option><option value="1">Phase 1</option><option value="2">Phase 2</option>'
  }  
  if(type.value == 0){
      $(subPhase).attr("hidden", true);
      option  = '<option value="0">SELECT</option>'
  }
  $(phase).append(option);
  $(subPhase).attr("hidden", true);
}

phase.addEventListener("change", showIfTech);

function showIfTech() {
  if(type.value == 2){
    $(subPhase).attr("hidden", false);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="empType">
  <option value="0">SELECT</option>
  <option value="1">LINE LEADER</option>
  <option value="2">TECHNICIAN</option>
</select>

<select id="phase">
  <option value="0">SELECT</option>
</select>

<select id="subPhase" hidden>
  <option value="0">SELECT</option>
  <option value="1">COMMON</option>
  <option value="2">ELECTRICAL</option>
  <option value="3">MECHANICAL</option>
</select>
<br>
<br>
<button disabled>CHECK ME</button>

CodePudding user response：

First, you need to add id attribute to button to use it later.

Second, use event listner change (using event delegation) to listen all select boxes change where it is not hidden with selector select:not([hidden]). And then test that all select boxes are selected where value is not 0.

Here is the code.

const type = document.getElementById("empType");
const phase = document.getElementById("phase");
const subPhase = document.getElementById("subPhase");


type.addEventListener("change", appendPhase);

function appendPhase() {
  $("#phase").empty();
  var option = '';
  if (type.value == 1) {
    option  = '<option value="0">SELECT</option><option value="1">Trainee</option><option value="2">Acting</option><option value="3">Competency</option>'
  }
  if (type.value == 2) {
    option  = '<option value="0">SELECT</option><option value="1">Phase 1</option><option value="2">Phase 2</option>'
  }
  if (type.value == 0) {
    $(subPhase).attr("hidden", true);
    option  = '<option value="0">SELECT</option>'
  }
  $(phase).append(option);
  $(subPhase).attr("hidden", true);
}

phase.addEventListener("change", showIfTech);

function showIfTech() {
  if (type.value == 2) {
    $(subPhase).attr("hidden", false);
  }
}


document.addEventListener('change', isAllSelected);

function isAllSelected() {
  let allSelected = [];
  const allSelectBoxes = document.querySelectorAll('select:not([hidden])');
  allSelectBoxes.forEach((item) => {
    if (item.value != '0') {
      allSelected.push(item.value);
    }
  });

  const checkMeButton = document.getElementById('check-me-button');
  if (allSelected.length === allSelectBoxes.length) {
    checkMeButton.disabled = false;
  } else {
    checkMeButton.disabled = true;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="empType">
  <option value="0">SELECT</option>
  <option value="1">LINE LEADER</option>
  <option value="2">TECHNICIAN</option>
</select>

<select id="phase">
  <option value="0">SELECT</option>
</select>

<select id="subPhase" hidden>
  <option value="0">SELECT</option>
  <option value="1">COMMON</option>
  <option value="2">ELECTRICAL</option>
  <option value="3">MECHANICAL</option>
</select>
<br>
<br>
<button id="check-me-button" disabled>CHECK ME</button>