- 首页
- 前端开发
- Bootstrap 表单:如何为单选按钮动态创建唯一名称
Bootstrap 表单:如何为单选按钮动态创建唯一名称
[英] Bootstrap forms: How to dynamically create unique names for radio buttons
本文介绍了Bootstrap 表单:如何为单选按钮动态创建唯一名称的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个问题是这个问题的后续一个.
这个 JSfiddle 举例说明了我想要实现的目标.
最终解决方案由@Scaramouche提供
下面的函数正在动态地建立一个列表"，其中包含四个一组的单选按钮.
这些组中的每一个都应该有一个唯一的名称，这样就可以选择其中一个选项，同时仍然可以选择其他组"中的其他选项.使这成为一个挑战的是，这个列表"是用 Bootstrap 表单构建的.我该怎么做，动态创建这些名称?这可以用 Vue 或 JavaScript 来完成(没有偏好).
HTML on JSfiddle
<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">问题:</label>
<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 class="form-group row"><div class="input-group input-group"><label id="questionOptions" class="form-control-label" style="width: 540px;"for="wQuestion">Enter可用选项:</label>
<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 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 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 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;">
</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">添加问题</label><label class="btn btn-success"><input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">保存测试</label>
</fieldset>
</表单>
JavaScript
$("body").on('click', '#radioAddQuestion', function () {让 singleQuestionModule = "singleQuestionModule";让问题 = $(".module:first").html();让 question_label = $(".question-label:first").html();$(question_label).insertBefore(".options-label");$(question).insertBefore(".options-label");});
解决方案
使用计数器修改下一组的名称.还将 .html() 更改为 .clone() 以处理整个元素的副本，而不仅仅是其内容.
https://jsfiddle.net/DTcHh/60016/
This question is a follow-up to this one.
This JSfiddle exemplifies what I want to achieve.
Final Solution provided by @Scaramouche
The function below is dynamically building up a "list" with radio buttons in groups of four.
Each of these group should have a unique name, which makes it possible to choose one of the options while still making it possible to choose other options in the other "groups". What makes this a challenge is that this "list" is built with Bootstrap forms. How do I do, to create these names dynamically? This can be done either with Vue or with JavaScript (no preference there).
HTML on 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");
});
解决方案
Use a counter to modify the name for the next group. Also changed .html() to .clone() to work with a copy of the whole element instead of just its content.
https://jsfiddle.net/DTcHh/60016/
这篇关于Bootstrap 表单:如何为单选按钮动态创建唯一名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
