【ラジオボタンの選択保持】「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。

実現したいこと

  • ラジオボタンの選択保持

前提

プラグイン「WCFM」商品編集画面の「金額」の項目をテキストボックスからラジオボタンに変更しています。
「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。

イメージ説明
イメージ説明
イメージ説明

発生している問題・エラーメッセージ

「送信」ボタンを押した後には、checked属性のラジオボタンが消去している。

該当のソースコード

Javascript

1 //ラジオボタンの設置2 $('input[name="regular_price"]').before(3 '<label class="price_radio1"><input type="radio" name="price_radio2" id="radio3" value="10"> 10円</label>'4 );5 $('input[name="regular_price"]').before(6 '<label class="price_radio2"><input type="radio" name="price_radio2" id="radio4" value="20"> 20円</label>'7 );8 9  //テキストボックスの非表示10 $('input[name="regular_price"]').css("opacity", "0");11 $('input[name="sale_price"]').css("opacity", "0");12 13  //ラジオボタンの内容をテキストボックスに埋め込む14 $(document).on("change", "input[name=price_radio2]", function () {15 const i = this;16 if ($(i).is(":checked")) {17 $('input[name="regular_price"]').val($(i).val());18 }19 });20 21 // テキストボックスの要素を取得22 const number = document.getElementById("regular_price");23 24 // ラジオボタンの要素を取得25 const radio = document.querySelectorAll(26 'input[type="radio"][name="price_radio2"]'27 );28 29 // テキストボックスの値が変更されたときのイベントリスナーを追加30 const input = parseInt(number.value);31 32 // テキストボックスの値に応じてラジオボタンを選択済みにする。33 if (input === 10) {34 $("#radio3").prop("checked", "checked"); // 10のラジオボタンを選択35 } else if (input === 20) {36 $("#radio4").prop("checked", "checked"); // 20のラジオボタンを選択37 } else {38 // 10と20以外の値の場合は選択を解除39 radio.forEach(function (ra) {40 ra.checked = false;41 });42 }

php

1// フックする関数2function custom_enqueue($hook_suffix)3{4 // 新規投稿または編集画面のみ5 if ('post.php' === $hook_suffix || 'post-new.php' === $hook_suffix || 'wcfm-content.php' === $hook_suffix) {6 // 読み込むスクリプトファイル(※依存関係:jquery)7 wp_enqueue_script('script_js', get_stylesheet_directory_uri() . '/script.js', array('jquery'));8 wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));9 }10}11// "custom_enqueue" 関数を管理画面のキューアクションにフック12add_action('admin_enqueue_scripts', 'custom_enqueue');

試したこと

・.prop("checked", "checked")の代わりに、
.checked = true
.attr("checked")
.prop("checked", true)
を入力

・inputタグにonclick属性を埋め込む。

補足情報(FW/ツールのバージョンなど)

Wordpress6.4.1バージョン
使用テーマ:Common child
OS:Windows11

コメントを投稿

0 コメント