0

実現したいこと

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

前提

この質問はマルチポストです。
下記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

2

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。