jsでフォームに何か入力があればdisabledが解除されるjsを作っているのですが、selectボックスを選択した場合が取れません。

Question

jsでフォームに何か入力があればdisabledが解除されるjsを作っているのですが、selectボックスを選択した場合が取れません。

正常に動作する場合はselectで選択を行うと select 要素で change イベントが発生したときにdisabled = falseにならないといけません。
途中まで制作中のサンプル
※こちらも一つのselectしか取れません
※.getElementsByClassName、 document.querySelectorAllにすると動作しなくなります

<label for="fruit">選択してください</label>
<select class="fruit">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry">Strawberry</option>
<option value="app">app</option>
</select>


<label for="fruit">選択してください</label>
<select class="fruit">
<option value="oranges">Oranges</option>
<option value="lemons">Lemons</option>
<option value="strawberrys">Strawberrys</option>
</select>

let fruitSelect = document.querySelector('.fruit');
fruitSelect.addEventListener('change', valueChange);

function valueChange(){
let selectOptions = fruitSelect.selectedOptions;
console.log('新しく ' + fruitSelect.value + ' を選択しました');
  for (let i = 0 ; i < selectOptions.length ; i++){
    //console.log(selectOptions[i].value);
    button.disabled = false;
    button.classList.remove('js-button');
  }
}  

<div class="col-9">
    <input type="text" class="form-control" id="inputtext5" placeholder="">
</div>

    <label for="textarea5" class="col-sm-3 col-form-label">特徴</label>
    <span class="c-check u-has-display-block">必須</span>
    <div class="col-6">
        <div class="form-group p-textarea--6">
            <textarea class="form-control" id="textarea5" placeholder=""></textarea>
        </div>
    </div>


<div class="p-select-body u-body-flex col-md-9 border-bottom-solid">
    <span class="p-select-body-sub--text u-has-inline-block">選択くださいc</span>
    <div class="col-md-9">
        <div class="select-icon--1">
            <select required="" class="form-control">
                <option value="">選択ください</option>
                <option value=""></option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
        </div>
        <div class="select-icon--2 p-tree-icon--1">
            <select required="" class="form-control">
                <option value="">選択ください</option>
                <option value=""></option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
        </div>
        <div class="select-icon--3 p-tree-icon--2">
            <select required="" class="form-control p-tree--2">
                <option value="">選択ください</option>
                <option value=""></option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
        </div>
    </div>
</div>

<div class="p-select-body u-body-flex col-md-9 border-bottom-solid">
    <span class="p-select-body-sub--text u-has-inline-block"> 1</span>
    <div class="col-md-9">
        <div class="select-icon--1">
            <select required="" class="form-control">
                <option value="" disabled="" selected="">選択ください</option>
                <option value=""></option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
        </div>
        <div class="select-icon--2 p-tree-icon--1">
            <select required="" class="form-control">
                <option value="" disabled="" selected="">選択ください</option>
                <option value=""></option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
        </div>
        <div class="select-icon--3 p-tree-icon--2">
            <select required="" class="form-control p-tree--2">
                <option value="" disabled="" selected="">選択ください</option>
                <option value=""></option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
        </div>
    </div>
</div>

<button type="submit" disabled="" class="js-button c-genric-btn p-genric-btn--secondary" onclick="location.href='#'">ここまでを保存する </button>

const formControl = document.querySelectorAll('.form-control');
const button = document.querySelector('.p-genric-btn--secondary');
let select = document.querySelectorAll('.p-select-body');

//console.log(formControl);
//console.log(button);
//console.log(inputChange);

formControl.forEach(formControl => {
formControl.addEventListener('keyup', (e) => {

if (1 <= e.target.value.length) {
button.disabled = false;
inputChange()
button.classList.remove('js-button');
}
})
});

function inputChange(event) {
??不明
}

selectボックスは12個あるのですが、全て対象で選択されればdisabledが解除されればいいのですが、うまくいかなくて。functionをどう書けばいいのかわからない状態です。

Comments

[ku__ra__ge]

> うまくいかなくて。
「うまくいった」場合にどのような動作をするのかを説明しないと回答できません。
どのような操作をしたとき、どのような動作をすることを想定しており、現在はどのような動作になってしまっているのかを書いてください。

[KKsall]

すみません。追記しました。

Answer 1

質問にあるコードの中に

const formControl = document.querySelectorAll('.form-control');

とありましたのでこれを使うと、各<select>で選択されている値のすべてを持つ配列valueは、以下で得られます。

const values = [...formControl].map(elm => elm.value);

ボタンを非活性にするのは、上記で得られる配列valueの中に、空文字列などのfalsyな値がひとつでも存在する場合であるとして、まずは問題ないと思いますので、ボタンのdisabledを設定する代入は

button.disabled = values.some(v => !v);

とします。これを実行する関数を作り、すべての<select>のchangeリスナーに設定すればよいかと思います。

参考までに、以下は上記を試すデモです。

???? tera:365825@codepen

追記

本題とは関係ありませんが、document.querySelectorAllで得られるNodeListの変数名は、複数形にしたほうがよいです。

- const formControl = document.querySelectorAll('.form-control');
+ const formControls = document.querySelectorAll('.form-control');

Comments

[KKsall]

ご親切にコードまでありがとうございます！！無事解決できました

[退会済みユーザー]

よかったですぅ〜。
ちなみに上記の回答では、以下の２行

const values = [...formControl].map(elm => elm.value);
button.disabled = values.some(v => !v);

によって、button.disabled を更新していますが、あらためて見直してみると、配列valuesを作らなくても、以下の1行で済みました。

button.disabled = [...formControl].some(({ value }) => !value);

[KKsall]

ありがとうございます！修正いたしました。

Answer 2

とりあえず、required属性を全部につけて、element.validity.valueMissingをeveryメソッドでチェックするのはどうでしょうか。

所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。

HTML 属性: required - HTML: HyperText Markup Language | MDN

　

validity 読取専用 ValidityState オブジェクト: その要素の現在の検証状態を返します。

HTMLInputElement - Web API | MDN

　

Boolean で、 true はその要素に required 属性があるものの、値がないことを示し、 false はそうではないことを示します。

ValidityState - Web API | MDN

　

列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします

Array.prototype.every() - JavaScript | MDN