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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2679閲覧

ラジオボタンでテキストボックスに入力できるようにしたい

creater_ks

総合スコア7

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/08/08 07:13

ラジオボタンでテキストボックスの入力をできるようにしたいですが、初心者のため何を直したほうがいいのかがわかりません。
ちなみにContactForm7でフォーム作成しています。
よろしくお願いします。

HTML

1<div class="box"> 2 <div class="left required">日程</div> 3 <div class="right"> 4 [radio nittei id:nittei1 use_label_element default:1 "半日"] 5 [radio nittei id:nittei2 use_label_element "1日"] 6 [radio nittei id:nittei3 use_label_element "数日"] [text nissu id:nissu size:3] 7 </div> 8</div>

JavaScript

1function(){ 2 if(document.getElementById("nittei3").checked){ 3 document.getElementById("nissu").disabled = 'false'; 4 }else{ 5 document.getElementById("nissu").disabled = 'true'; 6 } 7}

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

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

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

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

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

m.ts10806

2019/08/08 07:21

>ラジオボタンでテキストボックスの入力をできるようにしたいですが もう少し具体的に要件、あと手順?みたいなものを記載いただけますか?これだけ読むと訳が分かりません。 > [radio nittei id:nittei1 use_label_element default:1 "半日"] 何かしらのフレームワークをお使いでしょうか。 言語、フレームワークのタグを追加するか、現在のタグのままでいくのでしたらブラウザ「ソースを表示」で得られるHTMLをそのままご提示ください。
m.ts10806

2019/08/08 07:32

>ContactForm7 WordPressですかね。「WordPress」タグを追加しておいてください。
guest

回答2

0

ベストアンサー

初心者のため何を直したほうがいいのかがわかりません。

個人的にはこの「ほうがいい」という表現は不適当かと思うのですが、
そこは置いておいて、「直す」も何も処理が足りていません。

質問内容をエスパーすると「3番目のラジオボタンを選択したときに活性化したい」というものでしょうか。
だとすると、必要なのは下記。

  1. デフォルトはテキストボックスは非活性にすること
  2. ラジオボタンの選択、変更を以て「今何が選択されているか」チェックすること
  3. 3番目を選択したときだけテキストボックスを活性にすること

1番目は初期値で設定するだけで良いと思います。
これはContactForm7のドキュメントを確認してください。
disabledのつけ方。

2番目が実装されていませんので、そこを調べましょう。
[ラジオボタン 変更 イベント]あたりで調べると良いと思います。
※jQuery利用のものが良く出てきますがWordPressは確かjQuery初期で入ってたはずなので、jQueryのコードを参考にしても良いと思います

また、通常ラジオボタンの場合は「チェックされていたら」よりも
「今チェックされているラジオボタンの値が〇〇と同じだったら」としたほうが良いと思います。
valueの設定値ですね。

なので組み方は
0. use_label_element の変更イベントを拾う
0. 変更イベントが起きた(選択された)ラジオボタンの値を取得
0. その値が任意のものか(今回は3番目。valueは自身で確認してください)を確認
0. ↑で同じなら活性、違う場合は非活性

投稿2019/08/08 07:37

m.ts10806

総合スコア80765

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

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

creater_ks

2019/08/09 07:57

わかりやすい手順をありがとうございます。 初めての質問だったため、上記のご指摘もすごく勉強になりました。 もう一度調べなおしてみます。
m.ts10806

2019/08/09 07:59

番号付きで箇条書きしたように 「要件を細分化する」→「具体的な手順に起こす」のは何をするにも必要な作業ですし、どんなベテランエンジニアも粒度はともかくやっています。 机上でしっかり考えるからロジックも見えてくるものです。
creater_ks

2019/08/09 08:02

箇条書きで示していただいたことを教えていただける環境ではないためとても勉強になりました。 根本的な考え方まで教えていただきありがとうございます。
m.ts10806

2019/08/09 08:06

はい。他でも必ず活きます。 習慣づけるようにすると問題も自分だけで完結できるようになりますし、 質問する際もポイントがハッキリしているので的確な回答がつきやすくなり、また迅速に解決できるようになると思います
guest

0

こういうイメージですかね?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 [].forEach.call(document.querySelectorAll("[name=nittei]"),x=>{ 4 x.addEventListener('change',e=>{ 5 var t=e.target; 6 document.querySelector("#nissu").disabled=!document.querySelector('#nittei3').checked; 7 }); 8 }); 9}); 10</script> 11<div class="box"> 12 <div class="left required">日程</div> 13 <div class="right"> 14 <label><input type="radio" name="nittei" id="nittei1" value="半日">半日</label> 15 <label><input type="radio" name="nittei" id="nittei2" value="1日">1</label> 16 <label><input type="radio" name="nittei" id="nittei3" value="数日">数日</label> 17 <input type="text" name="nissu" id="nissu" size="3" disabled> 18 </div> 19</div>

投稿2019/08/08 07:53

yambejp

総合スコア114583

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

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

creater_ks

2019/08/09 07:58

回答ありがとうございます。 イメージと近い動きをしたのでとても助かりました。 違ったところは自分で調べなおしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問