サポート » プラグイン » MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい

  • 解決済 mountain22

    (@jpairb)


    MW WP Formを使わせていただいています。
    jQueryを利用し、フォームでチェックボックスのチェックの有り、無しに連動させて、表示、非表示の切り替えを行いたいです。
    以下のサイトを参考に後述のコードをmwform編集画面に記載しましたが、テキスト「チェックした時に表示」が表示されたままで動きがありません。
    https://qiita.com/kazu56/items/9112737c9511148c5cfe

    WP初心者で根本的なことが間違っているかもしれませんが、どなたかご教示いただけましたら幸いです。

    WordPressはVer5.0.2です。
    サイトでは、lightbox.jsなど jQueryプラグインは問題なく動作しています。今回もlightbox.jsと同様のやり方(function.phpに記載)でjsファイルを呼び出しています。

    【mwform編集画面での記載内容】
    [mwform_checkbox name=”ivent” children=”参加する” id=”checkbox”]
    <div class=”box”>チェックした時に表示</div>

    【jQuery】外部ファイル(子テーマ)
    $(function(){
    $(‘#checkbox’).change(function(){
    $(‘.box’).toggle();
    })
    })

10件の返信を表示中 - 31 - 40件目 (全40件中)
  • 年越しの慌ただしい時期に長らくお時間を取らせてしまい、申し訳ございませんでした。

    チェックボックスAと同時にBやCをチェックすると、下記のelse以下も一緒に適用されてしまい、確認画面の.boxを消してしまうのだと思います。対処が分からず、いいところまでいったと思ったのですがお手上げのようです。同一グループを分割したのが複雑にしてしまったようですね。

    // #checkbpox1 なし(確認画面)
    
    	// 値が d の要素が存在するかどうか?
    	if ($('input[value="d"]').length) {
    		$(".box").show(); // .box を表示
    	} else {
    		$(".box").hide(); // .box を非表示

    恐縮です。コメントで1つお聞きしたいのですが、

    } else {
    	// #checkbpox1 なし(確認画面)

    の部分は、id=checkbox-1にチェックが入っていないという理解でよいでしょうか。
    id=checkbox-1は要素dのみだけなので、// 値が d の要素が存在するかどうか?は同じ条件にならないでしょうか。

    • この返信は7 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は7 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は7 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は7 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は7 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は7 ヶ月、 3 週間前に  mountain22 さんが編集しました。
    • この返信は7 ヶ月、 3 週間前に  mountain22 さんが編集しました。

    id=checkbox-1にチェックが入っていないという理解でよいでしょうか。

    確認画面には、チェックの有無に関係なく #checkbpox-1 は存在しません
    値 が d の input 要素が存在する場合に、チェックされたと判定しています。

    繰り返しになりますが、確認画面のソースをご確認ください。

    • この返信は7 ヶ月、 3 週間前に  ishitaka さんが編集しました。
    • この返信は7 ヶ月、 3 週間前に  ishitaka さんが編集しました。

    知識不足でいろいろとご迷惑をおかけしました。
    本当にありがとうございました。

    if ($('input[name="ivent[data]"]').length) {

    if ($('input[value="d"]').length) {

    var ivents = $('input[name="ivent[data]"]').val().split(',');
    if ($.inArray('d', ivents) >= 0) {

    では、どうでしょうか?

    明けましておめでとうございます。再度のご返信ありがとうございます。

    いただいたコードでうまく動きました!

    前のやりとりの後、調べて条件分岐を色々と変えてやってみましたが、うまくいきませんでした。
    コーディングは内容を理解せず、コピペだけでやっていると、全然応用できないと痛感しています。
    本当にありがとうございました。

    何度もの質問で本当に申し訳ございません。

    jsファイルをご教示いただいた下記コード(function.phpに記載)で読み込んでいるのですが、これによって、MWFORMで使用しているデイトピッカー(カレンダーで選択)が機能しなくなってしまったようです。(この記載を外すと機能する)
    下記コードはform-open.jsを読む込みためだけの内容のように思いますが、なぜ影響したか不明です。これを回避する方法はありませんでしょうか。

    ●function.php

    function theme_enqueue_styles() {
    	wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery', 'mw-wp-form' ) );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    ●開発者ツールでのエラー表示

    Uncaught TypeError: Cannot read property 'split' of undefined
        at checkbox_change (form-open.js?ver=5.0.2:27)
        at HTMLDocument.<anonymous> (form-open.js?ver=5.0.2:41)
        at i (jquery.js?ver=1.12.4:2)
        at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
        at Function.ready (jquery.js?ver=1.12.4:2)
        at HTMLDocument.K (jquery.js?ver=1.12.4:2)

    提示のコードではそのようなエラーはでないと思いますが・・・

    違うと思いますが、

    var ivents = $('input[name="ivent[data]"]').val().split(',');
    if ($.inArray('d', ivents) >= 0) {

    var ivents = $('input[name="ivent[data]"]');
    if (ivents.length && $.inArray('d', ivents.val().split(',')) >= 0) {

    では、どうでしょうか?

    確認画面の HTML および form-open.js はどのようなコードでしょうか?

    申し訳ございません、説明が不十分でした。
    form-open.js を使用しているMWFORMのページは正常に動作しています。
    日付を選択できるデイトピッカー(MWFORM標準)を使っているのは別のページで、MWFORMのidが違います。そのページの入力画面でデイトピッカーが使えなくなりました。
    エラー表示は、そのページのものです。
    function.phpの記述(以下)を削除すると、デイトピッカーが機能するので、この記述が影響したと思われます。

    function theme_enqueue_styles() {
    	wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery', 'mw-wp-form' ) );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    もしかすると、テーマのJS読み込みが関係していますでしょうか。そうであれば、テーマ関係のサポートに問い合わせようと思いますが。

    スクリプトを対象のページだけ組み込むようにするか、スクリプトで対象ページか判定するといいかと思います。

    function theme_enqueue_styles() {
    	if ( is_page( 'contact' ) ) {
    		wp_enqueue_script( 'form-open', get_stylesheet_directory_uri() . '/assets/js/form-open.js', array( 'jquery', 'mw-wp-form' ) );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    または、

    jQuery(function($) {
    	var
    		checkbox = $("#checkbox-1"),
    		ivents = $('input[name="ivent[data]"]'),
    		checkbox_change = function () {
    			if (checkbox.length) {
    				// お問い合わせページ
    				if (checkbox.prop("checked")) {
    					$(".box").show();
    				} else {
    					$(".box").hide();
    				}
    			} else if (ivents.length)
    				// 確認ページ
    				if ($.inArray('d', ivents.val().split(',')) >= 0) {
    					$(".box").show();
    				} else {
    					$(".box").hide();
    				}
    			} else {
    				// その他のページ
    			}
    		};
    	checkbox_change();
    	checkbox.change(checkbox_change);
    });
    • この返信は7 ヶ月、 2 週間前に  ishitaka さんが編集しました。

    ご教示の通り、対象ページ指定で、他ページでカレンダー選択が機能するようになりました。
    度々の質問にもかかわらず、的確、ご丁寧なご返答をいただき、誠にありがとうございました。

    • この返信は7 ヶ月、 2 週間前に  mountain22 さんが編集しました。
10件の返信を表示中 - 31 - 40件目 (全40件中)
  • トピック「MW WP Formのチェックボックスに連動させて表示、非表示を切り替えたい」には新たに返信することはできません。