Как сделать заблокированный button если select пустой?

Question

У меня есть код, который блокирует button если input пустые, но у меня также есть select, который тоже нужно учитывать про блокировании button . Подскажите, как сделать проверку и на select?

const mainfunction = () => {
  const inputMail = document.querySelector(".element__input--mail");
  const inputPhone = document.querySelector(".element__input--phone");
  const button = document.querySelector(".element__button");

  const testForEmptiness = () => {
    const condition = inputMail.value !== "" && inputPhone.value !== "";
    condition ? (button.disabled = false) : (button.disabled = true);
  };

  testForEmptiness();

  inputMail.addEventListener("input", testForEmptiness);
  inputPhone.addEventListener("input", testForEmptiness);
};

document.addEventListener("DOMContentLoaded", mainfunction);

body {
  background: #eee;
}

.element {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  border-radius: 5px;
}

.element__input {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  font-family: "Oswald", sans-serif;
  font-size: 18px;
}

.element__button {
  padding: 8px 40px;
  background: cornflowerblue;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  transition: background 0.5s ease;
}

.element__button:hover {
  background: #6f64ed;
}

.element__button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.sec {
  margin-bottom: 20px;
}

<div class="element">

  <input class="element__input element__input--mail" placeholder="Enter text" />
  <input class="element__input element__input--phone" placeholder="Enter text" />

  <div class="sec">
    <select class="element__input--country">
      <option>Select</option>
      <option>Afghanistan</option>
      <option>Comoros</option>
      <option>Denmark</option>
    </select>
  </div>
  <button class="element__button">button && bububu</button>

</div>

Answer 1

const mainfunction = () => {
  const inputMail = document.querySelector(".element__input--mail");
  const inputPhone = document.querySelector(".element__input--phone");
  const select = document.querySelector(".element__input--country")
  const button = document.querySelector(".element__button");

  const testForEmptiness = () => {
    const condition = inputMail.value !== "" && inputPhone.value !== "" && select.value !== "Select";
    condition ? (button.disabled = false) : (button.disabled = true);
  };

  testForEmptiness();

  inputMail.addEventListener("input", testForEmptiness);
  inputPhone.addEventListener("input", testForEmptiness);
  select.addEventListener("input", testForEmptiness);
};

document.addEventListener("DOMContentLoaded", mainfunction);

body {
  background: #eee;
}

.element {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  border-radius: 5px;
}

.element__input {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  font-family: "Oswald", sans-serif;
  font-size: 18px;
}

.element__button {
  padding: 8px 40px;
  background: cornflowerblue;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  transition: background 0.5s ease;
}

.element__button:hover {
  background: #6f64ed;
}

.element__button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.sec {
  margin-bottom: 20px;
}

<div class="element">

  <input class="element__input element__input--mail" placeholder="Enter text" />
  <input class="element__input element__input--phone" placeholder="Enter text" />

  <div class="sec">
    <select class="element__input--country">
      <option>Select</option>
      <option>Afghanistan</option>
      <option>Comoros</option>
      <option>Denmark</option>
    </select>
  </div>
  <button class="element__button">button && bububu</button>

</div>

Answer 2

Самое простое решение - сперва добавлять слушатель, и только потом инициализировать плагин jQuery Form Styler-master

const mainfunction = () => {

  const inputMail = document.querySelector(".element__input--mail");
  const inputPhone = document.querySelector(".element__input--phone");
  const select = document.querySelector(".element__input--country")
  const button = document.querySelector(".element__button");
  const checkbox = document.querySelector("[name='checkbox']");

  const testForEmptiness = () => {
    const condition = inputMail.value !== "" && inputPhone.value !== "" && select.value !== "Select" && checkbox.checked;
    button.disabled = condition ? false : true;
  };
  
  testForEmptiness();

  inputMail.addEventListener("input", testForEmptiness);
  inputPhone.addEventListener("input", testForEmptiness);
  // добавляем на jQuery ивент и потом инициализируем плагин
  $(select).on('change', testForEmptiness).styler();
   //добавляем событие на чекбокс
  checkbox.addEventListener("change", testForEmptiness);
};

document.addEventListener("DOMContentLoaded", mainfunction);

body {
  background: #eee;
}

.element {
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  border-radius: 5px;
}

.element__input {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  font-family: "Oswald", sans-serif;
  font-size: 18px;
}

.element__button {
  padding: 8px 40px;
  background: cornflowerblue;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  transition: background 0.5s ease;
}

.element__button:hover {
  background: #6f64ed;
}

.element__button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.sec {
  margin-bottom: 20px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/Dimox/jQueryFormStyler/master/dist/jquery.formstyler.min.js"></script>
<div class="element">
  <input class="element__input element__input--mail" placeholder="Enter text" />
  <input class="element__input element__input--phone" placeholder="Enter text" />
  <div class="sec">
    <select class="element__input--country">
      <option>Select</option>
      <option>Afghanistan</option>
      <option>Comoros</option>
      <option>Denmark</option>
    </select>
  </div>
  <input type="checkbox" name="checkbox">
  <br/>
  <button class="element__button">button && bububu</button>
</div>

БЛОГ НА HUSL

Как сделать заблокированный button если select пустой?

Ответы (2 шт):