0

中继器字段我有以下用于转发器字段的代码。除单选按钮外，转发器字段中的所有输入字段均正常工作。

<div data-repeater-item>
    <ul>
        <li>
            <div class="form-check form-check-inline">
                <div class="custom-radio">
                    <input class="form-check-input" type="radio" name="period_type" id="inlineRadio7" value="Month">
                    <label class="form-check-label" for="inlineRadio7">Month</label>
                </div>
            </div>
            <div class="form-check form-check-inline">
                <div class="custom-radio">
                    <input class="form-check-input" type="radio" name="period_type" id="inlineRadio8" value="Day">
                    <label class="form-check-label" for="inlineRadio8">Day</label>
                </div>
            </div>
        </li>
        <li>
            <input type="number" class="form-control" name="period" placeholder="00">
            <label class="form-check-label">Month</label>
        </li>
        <li>
            <label class="form-check-label">Default price
                <!--per Month--></label>
            <input type="number" class="form-control" name="default_price" placeholder="00,000">
        </li>
        <li>
            <label class="form-check-label">Discounted price
                <!--per Month--></label>
            <input type="number" class="form-control" name="discount_price" placeholder="00,000">
        </li>
        <li class="add-remove">
            <input class="remove" data-repeater-delete type="button" value="- Remove" />
        </li>
    </ul>
</div>

单击第二个或以下单选按钮组的单选按钮时，第一个单选按钮组正在更改（因为我认为我为单选输入提供了 id）。如何使单选按钮也起作用？
任何帮助将不胜感激。

4

3 回答 3

1

每一行都是唯一的ID，lablefor&name val 

    <div class="repeater">
    <div data-repeater-list="category-group">
        <div data-repeater-item>
            <input type="hidden" name="id" id="cat-id" />
            <ul>
                <li>
                    <div class="form-check form-check-inline">
                        <div class="custom-radio">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="period_type" id="inlineRadio7" value="Month">
                                Month
                            </label>
                        </div>
                    </div>
                    <div class="form-check form-check-inline">
                        <div class="custom-radio">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="period_type" id="inlineRadio8" value="Day">
                                Day
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <input type="number" class="form-control" name="period" placeholder="00">
                    <label class="form-check-label">Month</label>
                </li>
                <li>
                    <label class="form-check-label">
                        Default price
                        <!--per Month-->
                    </label>
                    <input type="number" class="form-control" name="default_price" placeholder="00,000">
                </li>
                <li>
                    <label class="form-check-label">
                        Discounted price
                        <!--per Month-->
                    </label>
                    <input type="number" class="form-control" name="discount_price" placeholder="00,000">
                </li>
                <li class="add-remove">
                    <input class="remove" data-repeater-delete type="button" value="- Remove" />
                </li>
            </ul>
        </div>

    </div>
    <input data-repeater-create type="button" value="Add" />
</div>

JS

 $(document).ready(function () {
                'use strict';
                window.id = 0;

                $('.repeater').repeater(
                    {
                        defaultValues: {
                            'id': window.id,

                        },
                        show: function () {
                            $(this).slideDown();
                            console.log($(this).find('input')[1]);
                            $('#cat-id').val(window.id);
                        },
                        hide: function (deleteElement) {
                            if (confirm('Are you sure you want to delete this element?')) {
                                window.id--;
                                $('#cat-id').val(window.id);
                                $(this).slideUp(deleteElement);
                                console.log($('.repeater').repeaterVal());
                            }
                        },
                        ready: function (setIndexes) {
                        }
                    }
                );
            });

使用带有引导 HTML 的自定义单选

<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Or toggle this other custom radio</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Toggle this custom radio</span>
</label>

https://jsfiddle.net/lalji1051/034tp2ar/7/

于 2020-01-22T05:41:23.910 回答
0

您为单选按钮指定了相同的名称，因此它们作为一个组工作，因此每当您单击其中一个按钮时，其他按钮将被取消选择。

您需要为不同行中的单选按钮赋予不同的名称才能独立工作

<!--- First row -->
    <div class="form-check form-check-inline">
        <div class="custom-radio">
           <input class="form-check-input" type="radio" 
                  name="period_type_7" id="inlineRadio7" value="Month">
           <label class="form-check-label" for="inlineRadio7">Month</label>
        </div>
    </div>
    <div class="form-check form-check-inline">
         <div class="custom-radio">
            <input class="form-check-input" type="radio" 
                   name="period_type_7" id="inlineRadio8" value="Day">
            <label class="form-check-label" for="inlineRadio8">Day</label>
         </div>
    </div>

   <!--- Second row -->
<div class="form-check form-check-inline">
        <div class="custom-radio">
           <input class="form-check-input" type="radio" 
                  name="period_type_9" id="inlineRadio9" value="Month">
           <label class="form-check-label" for="inlineRadio9">Month</label>
        </div>
    </div>
    <div class="form-check form-check-inline">
         <div class="custom-radio">
            <input class="form-check-input" type="radio" 
                   name="period_type_9" id="inlineRadio10" value="Day">
            <label class="form-check-label" for="inlineRadio10">Day</label>
         </div>
    </div>
于 2020-01-22T05:18:58.550 回答
0

您可以使用 jquery 复制项目并使用类索引获取它们，例如：

var repeater = doucument.getElementsByClassName('class-name');

并开始使用

repeater[index];

我已经测试了以下链接中的代码： https ://www.jqueryscript.net/form/Form-Fields-Repeater.html

于 2020-01-22T05:32:37.200 回答