jquery - Bootstrap 形式 : How to dynamically create unique names for radio buttons

Question

这个问题是 one 的后续问题.

这个JSfiddle体现了我想要实现的目标。

最终Solution由@Scaramouche提供

下面的函数动态构建一个“列表”，其中单选按钮每组四个。

每个组都应该有一个唯一的名称，这样就可以选择其中一个选项，同时仍然可以选择其他“组”中的其他选项。这是一个挑战，因为这个“列表”是用 Bootstrap 表单构建的。我该如何动态创建这些名称？这可以使用 Vue 或 JavaScript 来完成(没有偏好)。

HTML JSfiddle

<div id="singleQuestionModule">
    <form class="form-group">
        <div class="d-flex justify-content-center">
            <fieldset class="form-group row">
                <span class="module">
                    <legend class="col-form-legend col-sm-10"></legend>
                    <div class="input-group input-group">
                        <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>

                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <label id="questionOptions" class="form-control-label" style="width: 540px;"
                                   for="wQuestion">Enter
                                avaible options:</label>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name= "q" id="option1" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option2" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option3" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" name="q" id="option4" aria-label="">
                  </span>
                            <input type="text" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                </span>
                <span class="options-label"></span>
                <br>
                <div class="form-group row">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-success" id="radioAddQuestion">
                            <input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label>

                        <label class="btn btn-success">
                            <input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save
                            Test </label>
                    </div>
                </div>
            </fieldset>
        </div>
    </form>
</div>

JavaScript

$("body").on('click', '#radioAddQuestion', function () {

    let singleQuestionModule = "singleQuestionModule";
    let question = $(".module:first").html();
    let question_label = $(".question-label:first").html();

    $(question_label).insertBefore(".options-label");
    $(question).insertBefore(".options-label");

});

Answer 1

使用计数器修改下一组的名称。还将 .html() 更改为 .clone() 以处理整个元素的副本，而不仅仅是其内容。

https://jsfiddle.net/DTcHh/60016/