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

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

ただいまの
回答率

88.06%

ラジオボタンでセレクトメニューの表示を変える

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 669

score 29

下記のようにラジオボタンの選択によってセレクトメニューのoptionを表示・非表示しましたが、
formでselectで時間が選択されているんですが、submitボタンを押しても、確認画面へ遷移しません。
未入力扱いなんでしょうか?
selectをrequiredにしていますが、未入力として扱ってくれません。

またラジオボタンを選択してない間は、selectをdisabledに実装したいです。

<form role="form" method="post" action="conf.php" data-toggle="validator">
<input type="radio" name="sample" id="radio01" onclick="entryChange1();" value="エー"/><label for="radio01">エー</label>
<input type="radio" name="sample" id="radio02" onclick="entryChange1();" value="ビー" /><label for="radio02">ビー</label>
<select name="セレクトサンプル" id="seminar-time" required>
 <option value="" selected="selected">お選び下さい</option>
 <option value="11:00~12:00">11:00~12:00</option>
 <option value="14:00~15:00">14:00~15:00</option>
 <option value="20:00~21:00" id="none-radio02">20:00~21:00</option>
</select>
<button type="submit" class="submit-btn"><span>入力確認画面へ</span></button>
</form>
var original = document.getElementById('seminar-time').cloneNode(true);

function entryChange1(){
    radio = document.getElementsByName('sample')

    var clone = original.cloneNode(true);
    if (radio[1].checked) {
      var target = clone.querySelector('#none-radio02');
      target.parentNode.removeChild(target);
    }

    var select = document.getElementById('seminar-time');
    select.parentNode.replaceChild(clone, select);
}

window.onload = entryChange1;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/05/28 17:51

    『submitボタンを押しても、確認画面へ遷移しません』とのことですが、ご提示のコードにはsubmitボタンがないようです。

    キャンセル

  • kei344

    2019/05/28 17:53

    部分を抜き出すのではなく書かれている状況が再現するコード(HTML/JavaScript)を質問文に追記されたほうが回答を得やすいと思います。

    キャンセル

  • buk

    2019/05/28 18:00

    追記しました

    キャンセル

  • Lhankor_Mhy

    2019/05/28 18:04

    当方にてご提示のコードを試したところ、select要素のrequiredは有効に働いており、またpostも問題なくできました。
    ですので、「submitボタンを押しても、確認画面へ遷移しません」と「selectをrequiredにしていますが、未入力として扱ってくれません」のいずれの問題も再現しませんでした。

    環境の問題か、ご提示いただいていないコードに問題があるか、のどちらかだと思います。

    キャンセル

回答 2

checkベストアンサー

0

またラジオボタンを選択してない間は、selectをdisabledに実装したいです。

function entryChange1(){
//...
// 最後に追加
  original.disabled = false;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

Bootstrap Validator (Validator, for Bootstrap 3) を使っているのであれば、replaceChild() のあと更新する必要があります。

    $('form').validator('update');


https://1000hz.github.io/bootstrap-validator/#validator-methods

-- disabled について追記
select 要素に disabled 属性をつけるのはお勧めできません。disabled 属性があると検証対象から外され、必須ではなくなってしまうからです(何も入力しないで送信可能にしたいならそれでいいですが)。
Bootstrap Validator (Validator, for Bootstrap 3) は disabled 属性を見ていないようですが、都合がいいというより出来が悪いといったほうがいいでしょう。

input[name="sample"] ~ #seminar-time {
  pointer-events: none;
}

input[name="sample"]:checked ~ #seminar-time {
  pointer-events: auto;
}

ちなみに、Windows 8.1 の IE11 ではバグがあるようです。
https://dskd.jp/archives/85.html

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る