実現したいこと
- ラジオボタンの選択保持
前提
この質問はマルチポストです。
下記URLでも質問しています。
https://teratail.com/questions/9pkuzcnadxkgq6
プラグイン「WCFM」商品編集画面の「金額」の項目をテキストボックスからラジオボタンに変更しています。
「送信」ボタンを押した後でも、選択保持をしているラジオボタンを制作したいです。
発生している問題・エラーメッセージ
「送信」ボタンを押した後には、checked属性のラジオボタンが消去している。
該当のソースコード
//ラジオボタンの設置
$('input[name="regular_price"]').before(
'<label class="price_radio1"><input type="radio" name="price_radio2" id="radio3" value="10"> 10円</label>'
);
$('input[name="regular_price"]').before(
'<label class="price_radio2"><input type="radio" name="price_radio2" id="radio4" value="20"> 20円</label>'
);
//テキストボックスの非表示
$('input[name="regular_price"]').css("opacity", "0");
$('input[name="sale_price"]').css("opacity", "0");
//ラジオボタンの内容をテキストボックスに埋め込む
$(document).on("change", "input[name=price_radio2]", function () {
const i = this;
if ($(i).is(":checked")) {
$('input[name="regular_price"]').val($(i).val());
}
});
// テキストボックスの要素を取得
const number = document.getElementById("regular_price");
// ラジオボタンの要素を取得
const radio = document.querySelectorAll(
'input[type="radio"][name="price_radio2"]'
);
// テキストボックスの値が変更されたときのイベントリスナーを追加
const input = parseInt(number.value);
// テキストボックスの値に応じてラジオボタンを選択済みにする。
if (input === 10) {
$("#radio3").prop("checked", "checked"); // 10のラジオボタンを選択
} else if (input === 20) {
$("#radio4").prop("checked", "checked"); // 20のラジオボタンを選択
} else {
// 10と20以外の値の場合は選択を解除
radio.forEach(function (ra) {
ra.checked = false;
});
}
// フックする関数
function custom_enqueue($hook_suffix)
{
// 新規投稿または編集画面のみ
if ('post.php' === $hook_suffix || 'post-new.php' === $hook_suffix || 'wcfm-content.php' === $hook_suffix) {
// 読み込むスクリプトファイル(※依存関係:jquery)
wp_enqueue_script('script_js', get_stylesheet_directory_uri() . '/script.js', array('jquery'));
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
}
// "custom_enqueue" 関数を管理画面のキューアクションにフック
add_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