multiple select remove disable button if select is not empty

Question

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>

score 2 · Accepted Answer · answered Jan 16 '23 at 05:18

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>

can i ask how to change this selector "document.querySelectorAll('select:not([hidden])')" if i put my select inside div. then that div where will i put my hidden attribute... Because later ill put label on it. i also want to hide the label. sooo i think i better put it inside div or no? @vee — Strywyr, Jan 16 '23 at 05:34
@Strywyr You may use jQuery `:visible`. See [this answer](https://stackoverflow.com/a/13949759/128761) as example. Please note that they use different `.each()`. Example: `$('select:visible')`. — vee, Jan 16 '23 at 06:18
Or use [`.offsetXXX` to check](https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom). — vee, Jan 16 '23 at 06:23

multiple select remove disable button if select is not empty

1 Answers1