Bootstrap表单:如何为单选按钮动态创建唯一名称

时间:2018-04-03 16:20:41

标签: jquery vue.js bootstrap-4

此问题是此one的后续问题。

这个JSfiddle举例说明了我想要实现的目标。

@Scaramouche提供的最终Solution

以下功能是动态构建一个"列表"带有四个一组的单选按钮。

这些组中的每一个都应该具有唯一的名称,这使得可以选择其中一个选项,同时仍然可以在其他组中选择其他选项"组"。这是一个挑战的原因是这个"列表"使用Bootstrap表单构建。我该怎么做,动态创建这些名称?这可以使用Vue或JavaScript(没有首选项)来完成。

JSfiddle

上的

HTML

<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");

});

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

诀窍是寻找最后添加的.module。现在,使用.html()插入新字段,您没有此换行span ...因此请改用.clone()。定位新添加的标记会更容易。

然后,使用变量来计算click个事件......您可以创建唯一的id

var n=0;
$("body").on('click', '#radioAddQuestion', function () {

  // Counter.
  n++;

  var singleQuestionModule = "singleQuestionModule";

  var question = $(".module:first").clone();
  var question_label = $(".question-label:first").html();

  $(question_label).insertBefore(".options-label");
  console.log(question_label);  // Undefined in this example...

  $(question).insertBefore(".options-label");
  console.log(question.html());

  // Add "_" and a number to the ids.
  $(document).find(".module:last").find("input[type='radio']").each(function(){
    $(this).attr("id",$(this).attr("id")+"_"+n);
  });
});

您的updated Fiddle