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

问题描述 投票:2回答:2

这个问题是对这个one的后续问题。

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

最终的Solution由@Scaramouche提供

下面的功能是动态建立一个“列表”,其中包含四个一组的单选按钮。

这些组中的每一个都应具有唯一的名称,这使得可以选择其中一个选项,同时仍然可以在其他“组”中选择其他选项。这是一个挑战,这个“列表”是用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");

});
jquery vue.js bootstrap-4
2个回答
2
投票

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

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


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

© www.soinside.com 2019 - 2024. All rights reserved.