主にJavascriptに関する質問です。
可動させたい内容として、
チェックボックスを1つでも選択すると、submit送信ボタンが、可能になる、
選択上限は3つ、といった内容です。
以下のようなプログラミング組んでみましたが、どうにも動きません。
バグ箇所の修正など、可動可能なJavascriptの解答のほど、よろしくお願いします。
<form class="pet-form"> <div class="fields"> <label for="dog"> <input type="checkbox" id="dog" name="pet[]"> Dog </label> <label for="cat"> <input type="checkbox" id="cat" name="pet[]"> Cat </label> <label for="duck"> <input type="checkbox" id="duck" name="pet[]"> Duck </label> <label for="moose"> <input type="checkbox" id="moose" name="pet[]"> Moose </label> <label for="dragon"> <input type="checkbox" id="dragon" name="pet[]"> Dragon </label> </div> <div class="message">1ヶ〜3ヶ のチェック選ぶ</div> <div class="button-wrapper"> <button class="submit" disabled>送信</button> </div> </form>
、
label { cursor: pointer; } button { padding: 1em 2em; } .message { padding: 1em; background: #FFE0E0; margin: 1em 0; }
、
const form = document.querySelector('form.pet-form'); const fields = form.querySelectorAll('input'); const button = form.querySelector('button.submit'); const msg = form.querySelector('.message'); form.addEventListener('change', validateForm); form.addEventListener('submit', handleSubmit); function validateForm() { let boxCount = 0; fields.forEach(field => field.checked ? boxCount++ : null); if (boxCount > 3 || boxCount <1) { msg.innerText = "1〜3 のチェック必要"; msg.style.backgroundColor = '#FFE0E0' button.disabled = true; } else { msg.innerText = "送信できます"; button.disabled = false; msg.style.backgroundColor = '#82C089' } } function handleSubmit(e) { e.preventDefault(); alert('Submitted the form'); }
回答1件