Gravity Forms - 使用过滤器将单选按钮标记更改为 Bootstrap 按钮组

编程问答 2022-05-28

问题描述

我正在尝试使用过滤器将表单上单选按钮的标记更改为 Bootstrap 按钮组。我能够得到大部分，但有一件事我无法弄清楚。我正在使用 jQuery 来解决它，但我想尽可能不使用 jQuery。以下是按钮组的 Bootstrap 设置：

<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>

这里是我使用过滤器的地方：

<div class="ginput_container ginput_container_radio">
    <ul class="gfield_radio" id="input_1_8">
        <input name="input_8" type="radio" class="btn-check" autocomplete="off" value="Single" id="choice_1_8_0">
        <label class="btn text-white btn-outline-primary" for="choice_1_8_0" id="label_1_8_0">
            Single
        </label>
        <input name="input_8" type="radio" class="btn-check" autocomplete="off" value="Married" id="choice_1_8_1">
        <label class="btn text-white btn-outline-primary" for="choice_1_8_1" id="label_1_8_1">
            Married
        </label>
    </ul>
</div>

现在，我正在使用 jQuery 将 ul 更改为 <div class="btn-group" role="group">，但如果可能的话，我想使用过滤器来做到这一点。我看到了 gform_field_container 过滤器，它只移除了周围的 div……并且还从 一切 中移除了周围的 div。当我尝试使用 if($field["type"] == 'radio') 执行此操作时，它删除了所有不是单选按钮的和单选按钮周围的 div。

这是我必须调整其余内容的内容：

add_filter( 'gform_field_choice_markup_pre_render_1',function ( $choice_markup,$choice,$field,$value ) {
    if ( $field->get_input_type() == 'radio' ) {
        $choice_markup = strip_tags($choice_markup,'<input><label>');
        $choice_markup = str_replace( "type='radio'","type='radio' class='btn-check' autocomplete='off'",$choice_markup );
        $choice_markup = str_replace( "label for","label class='btn text-white btn-outline-primary' for",$choice_markup );
    }
    return $choice_markup;
},10,4 );

我知道这是很多文字，所以如果我需要澄清任何事情，请告诉我。 ?

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

add-filterbootstrap-5gravityformswordpress