Q&A
下記のサイトを参考にし、ボタンを無効化したり有効化したりしたいのですが、チェックボックスにチェックを入れてもボタンに変化がありません。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <meta name="description" content="このページの説明文"> 6 <title>このページのタイトル</title> 7 <link rel="stylesheet" href="/main.css"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 9 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> 10 <script> 11 $('#check').change(function() { 12 // チェックが入っていたら有効化 13 if ( $(this).is(':checked') ){ 14 // ボタンを有効化 15 $('#button').prop('disabled', false); 16 } else { 17 // ボタンを無効化 18 $('#button').prop('disabled', true); 19 } 20 }); 21 </script> 22 </head> 23 <body> 24 <input id="check" type="checkbox" />チェックしてください<br> 25 <button id="button" disabled="disabled">送信</button> 26 </body> 27</html>
回答1件
0
ベストアンサー
inputやbuttonが用意される前にscriptが実行されてしまうことが原因のようです。
</body>の直前に<script>～</script>を持ってくるか、$(function(){～});でスクリプトを囲んで DOMが準備できたタイミングで実行するようにしてみてください。投稿2019/12/19 13:15
総合スコア219
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/19 13:35