質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

3回答

210閲覧

LravelでjQueryが読み込めているのに動かない

Chandler_Bing

総合スコア673

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

1クリップ

投稿2019/06/12 03:26

以下がbladeの画面です一番下でmian.js(自作クラス)を読み込んでいます。
layoutを使いviewを作成していますが、展開したものを載せています。

php

1 2<!doctype html> 3<html lang="ja"> 4 5<head> 6 <!-- Required meta tags --> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 9 10 <!-- Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 12 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 13 14 <title>basic2</title> 15 <style> 16 .errormsg { 17 color: #f08080 18 } 19 20 .disabled { 21 pointer-events: none; 22 background-color: #d3d3d3; 23 } 24 25 </style> 26</head> 27 28<body> 29 30 <div class="container"> 31 <form action="/basic1" method="post"> 32 33 <input type="hidden" name="_token" value="jWJDVkEXGt2jdeUzr4MZjQ4HU42X6ndAlDHzO3q0"> 34 35 <form> 36 37 <div class="form-row mt-5"> 38 <div class="form-group col-md-6"> 39 <label for="inputZip" class="font-weight-bold">郵便番号</label> 40 <input type="text" class="form-control" id="inputZip"> 41 </div> 42 <div class="form-group col-md-6"> 43 <label for="inputState" class="font-weight-bold">都道府県</label> 44 <select id="inputState" class="form-control"> 45 <option selected>Choose...</option> 46 <option>...</option> 47 </select> 48 </div> 49 </div> 50 51 52 53 <div class="form-group my-5"> 54 <label for="inputAddress" class="font-weight-bold">以降の住所</label> 55 <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> 56 </div> 57 58 <div class="form-group mb-5"> 59 <label for="inputReason" class="font-weight-bold">知ったきっかけ</label> 60 <select class="custom-select" id="inputReason"> 61 <option selected>Open this select menu</option> 62 <option value="1">One</option> 63 <option value="2">Two</option> 64 <option value="3">Three</option> 65 </select> 66 67 </div> 68 69 <div class="form-group mb-5"> 70 <label for="inputReason" class="font-weight-bold">目的</label> 71 <select class="custom-select" id="inputReason"> 72 <option selected>Open this select menu</option> 73 <option value="1">One</option> 74 <option value="2">Two</option> 75 <option value="3">Three</option> 76 </select> 77 </div> 78 79 <p class="font-weight-bold h6">TOEIC</p> 80 <div class="form-group mb-5"> 81 <div class="custom-control custom-switch custom-control-inline"> 82 <input type="radio" name="toeic" value="have" class="custom-control-input form-control-lg" 83 id="customSwitch1"> 84 <label class="custom-control-label font-weight-bold" for="customSwitch1">受験経験あり</label> 85 </div> 86 <div class="custom-control custom-switch custom-control-inline"> 87 <input type="radio" name="toeic" value="have_not" class="custom-control-input form-control-lg" 88 id="customSwitch2"> 89 <label class="custom-control-label font-weight-bold" for="customSwitch2">受験経験なし</label> 90 </div> 91 </div> 92 93 <div class="form-group mb-5"> 94 <label for="inputResult" class="font-weight-bold">点数</label> 95 <select class="custom-select" id="inputResult"> 96 <option selected>Open this select menu</option> 97 <option value="1">One</option> 98 <option value="2">Two</option> 99 <option value="3">Three</option> 100 </select> 101 </div> 102 103 <p><button type="submit" class="btn btn-primary mb-5">Next</button></p> 104 105 </form> 106 </div> 107 108 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 109 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> 110 </script> 111 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 112 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> 113 </script> 114 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 115 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> 116 </script> 117 <script src="/js/main.js"></script> 118 </body> 119 120</html>

js

1(function() { 2 // 'use strict'; 3 4 //ページが読み込まれた時の処理 5 console.log('AAAAA'); 6 7 //ラジオボタンがクリックされた時の処理 8 $('input[name="toeic"]:radio').change(function() { 9 var radioval = $(this).val(); 10 console.log(radioval); 11 if (radioval == 'have') { 12 $('#inputResult').removeClass('disabled'); 13 } else { 14 $('#inputResult').addClass('disabled'); 15 } 16 }); 17});

ページを読み込んでもエラーはありませんし、main.jsもきちんとsourcesに読み込まれています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自己解決

修正後js

js

1 $('input[name="toeic"]:radio').change(function() { 2 var radioval = $(this).val(); 3 console.log(radioval); 4 if (radioval == 'have') { 5 $('#inputResult').removeClass('disabled'); 6 } else { 7 $('#inputResult').addClass('disabled'); 8 } 9 }); 10})();

投稿2019/06/12 03:39

Chandler_Bing

総合スコア673

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/12 04:56

この回答のどこにyambejpさんの回答との「行き違い」があるのでしょうか。 半端に動かないコードで解決とするのはやめてください。後から同じ問題を抱えた人にも迷惑をかけます。
guest

0

(function() {

で始まる無名関数を動作させるなら最後は

})();

単純に
$(function(){
から始めればいいような気もしますけどね

投稿2019/06/12 03:38

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Chandler_Bing

2019/06/12 03:40

行き違いでした。まさにそれで解決しました。
guest

0

<input type="radio">の場合、valueはチェック状態で変化しません.val()ではなく、.prop('checked').is(':checked')で状態を見る必要があります。

投稿2019/06/12 03:30

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問