アトリエロワ

mw wp formでチェックボックス（1つ）にチェックを入れた時だけ表示・表示されたinputは入力必須

mw wp formの内容が下記の場合

■ 電話を希望する
[mwform_checkbox name="telkibou" id="telkibou" children="電話を希望する"]

<div id="checkopen">
■ 電話番号
[mwform_text name="mwtel" id="mwtel"]
</div>

css

#checkopen {
  display: none;
}

「電話を希望する」にチェックを入れると、id=”checkopen”が開く

■jqueryを読み込んだ上で、jsファイルに記載

id=”telkibou”　が　id=”telkibou-1″　に自動で変更されている点に注意（開発ツールで実際のidを確認する）

 $(function(){
  $(document).ready(function() {
    // ページ読み込み時にセッションストレージから状態を復元
    var isChecked = sessionStorage.getItem('telkibou-1-checked') === 'true';
    $('#telkibou-1').prop('checked', isChecked);
    if (isChecked) {
      $('#checkopen').show();
    }
  
    $('#telkibou-1').change(function() {
      if ($(this).is(':checked')) {
        $('#checkopen').show();
      } else {
        $('#checkopen').hide();
      }
      // チェック状態をセッションストレージに保存
      sessionStorage.setItem('telkibou-1-checked', $(this).is(':checked'));
    });
  });
 });

name=”telkibou”　にチェックを入れると、name=”mwtel”　が入力必須になる。チェックを外すと必須でなくなる。

■ functions.phpに記載

●●●はmw wp formの識別子　=　[mwform_formkey key=”●●●”]

function my_validation_rule( $Validation, $data, $Data ) {
  if (isset($data['telkibou']['data'])) {
    $checkboxValues = $data['telkibou']['data'];
    if (is_array($checkboxValues) && in_array("電話を希望する", $checkboxValues)) {
      $Validation->set_rule( 'mwtel', 'noEmpty' );
    } return $Validation;
  }
}
add_filter( 'mwform_validation_mw-wp-form-●●●', 'my_validation_rule', 10, 3 );

HOME > wordpress設計術 > mw wp formでチェックボックス（1つ）にチェックを入れた時だけ表示・表示されたinputは入力必須

wordpress設計術

wordpress設計術

+ More