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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

732閲覧

動画が選択されていたらボタンを押せるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2020/01/15 15:15

テキスト、画像、動画のいずれか一つ以上が選択されている場合に投稿ボタンを押せるようにしたいのですが動画が選択されているかどうかの判定方法がよくわかりません。
テキスト・画像いずれか一つ以上が選択されているかどうか

JavaScript

1 $(document).ready(function() { 2 $('#submit').prop('disabled', true); 3 $('.photo-up').on('click', function() { 4 if ($(this).val().length > 0) { 5 $('#submit').prop('disabled', false); 6 } else { 7 $('#submit').prop('disabled', true); 8 } 9 }); 10 $('#text').on('keydown keyup keypress change', function() { 11 if ($(this).val().length > 0) { 12 $('#submit').prop('disabled', false); 13 } else { 14 $('#submit').prop('disabled', true); 15 } 16 }); 17 });

画像・テキストは上記のコードで成功したのですが下記のコードのように動画が選択されているか否かの処理がうまくいきません。

テキスト・画像・動画のいずれか一つ以上が選択されているかどうか

JavaScript

1 $(document).ready(function() { 2 $('#submit').prop('disabled', true); 3 $('.photo-up').on('click', function() { 4 if ($(this).val().length > 0) { 5 $('#submit').prop('disabled', false); 6 } else { 7 $('#submit').prop('disabled', true); 8 } 9 }); 10 $('.video-up').on('click', function() { 11 if ($(this).val().length > 0) { 12 $('#submit').prop('disabled', false); 13 } else { 14 $('#submit').prop('disabled', true); 15 } 16}); 17 $('#text').on('keydown keyup keypress change', function() { 18 if ($(this).val().length > 0) { 19 $('#submit').prop('disabled', false); 20 } else { 21 $('#submit').prop('disabled', true); 22 } 23 }); 24 }); 25

HTML

HTML

1<form enctype="multipart/form-data" action="/posts" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="ernAj77WKTiNZEei/svubbs6kFdUbQmTz9BXZokkwIO5TBttzzrwwvx7e3xwB08vj405N7XqJqcOlj+tZDeiPA=="> 2 <textarea placeholder="投稿内容" class="post-form-new" rows="3" onkeyup="ShowLength(value);" id="text" name="post[text]" style="overflow: hidden;"></textarea> 3 4 <div class="new-buttons"> 5 <div id="preview"></div> 6 <label> 7 <div class="tooltip1"> 8 <span class="filelabel"> 9 <input id="filesend" onchange="imgPreView(event)" accept="image/*" class="photo-up" type="file" name="post[image]"> 10 <img width="32" height="26" class="post-photo" src="/assets/photo-fca06e0acf6ae91e871e7cc024a426beed0f3a3fb15e835f9cd1ea39f6df3650.svg"> 11 <div class="photo-pop">画像を追加</div> 12 </span> 13 </div> 14 </label> 15 <label> 16 <div class="tooltip1"> 17 <span class="filelabel"> 18 <input id="video" onchange="imgPreView(event)" accept="video/*" class="video-up" type="file" name="post[video]"> 19 <img width="32" height="26" class="post-photo" src="/assets/video-eebb3db2834953c60d60b63a96ec4d67cb8c9f8c681a033d1b7b8885879fbe25.svg"> 20 <div class="video-pop">動画を追加</div> 21 </span> 22 </div> 23 </label> 24   25 <input type="submit" name="commit" value="投稿" class="new-post-btn" id="submit" data-disable-with="投稿" disabled=""> 26 <p id="inputlength" class="new-textlength">0/250</p> 27 </div> 28</form>

画像が選択されているか判定するコードと動画が選択されているか判定するコードはclass名を変更するだけではいけないのでしょうか。
JavaScriptに詳しい方教えていただけると幸いです。

iio👍を押しています

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

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

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

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

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

guest

回答1

0

クラス名変えるだけで、いけると思うのですが。

画像、テキストを選択すると、submitが押せるようになるんですよね。
動画を選択すると、submitは押せるようにならないのですか?

テキスト・画像・動画のいずれか一つ以上が選択されているかどうか

このロジックだと、
画像を選択して、ボタンがtrueになり、
テキストを入力して、ボタンはtrueのままで、
テキストを消去すると、ボタンはfalseになってしまいます。
画像が選択されているのに、ボタンが押せないという状況になります。

投稿2020/01/16 14:28

編集2020/01/16 14:36
KazuSaka

総合スコア640

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問