保持按钮处于选中状态

Question

我有以下三个likert标度：

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="fear" type="button" class="btn btn-default likert-1">1</button>
    <button id="fear" type="button" class="btn btn-default likert-2">2</button>
    <button id="fear" type="button" class="btn btn-default likert-3">3</button>
    <button id="fear" type="button" class="btn btn-default likert-4">4</button>
    <button id="fear" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="danger" type="button" class="btn btn-default likert-1">1</button>
    <button id="danger" type="button" class="btn btn-default likert-2">2</button>
    <button id="danger" type="button" class="btn btn-default likert-3">3</button>
    <button id="danger" type="button" class="btn btn-default likert-4">4</button>
    <button id="danger" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="control" type="button" class="btn btn-default likert-1">1</button>
    <button id="control" type="button" class="btn btn-default likert-2">2</button>
    <button id="control" type="button" class="btn btn-default likert-3">3</button>
    <button id="control" type="button" class="btn btn-default likert-4">4</button>
    <button id="control" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>

和以下脚本：

$(".btn.btn-default").click(function () {
        if (this.id == 'fear') {
            $('#fear').val($(this).text());              
        } else if (this.id == 'control') {
            $('#control').val($(this).text());               
        } else if (this.id == 'danger') {
            $('#danger').val($(this).text());                
        }
    });

然而，在选择了第一个likert标度之后，在第二个likert标度上进行了选择，第一个标度的选择就会丢失。请参阅gif：

​

​

Answer 1

首先，你不应该有重复的ID。将它们更改为以下内容：

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="fear1" type="button" class="btn btn-default likert-1">1</button>
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button>
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button>
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button>
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="danger1" type="button" class="btn btn-default likert-1">1</button>
    <button id="danger2" type="button" class="btn btn-default likert-2">2</button>
    <button id="danger3" type="button" class="btn btn-default likert-3">3</button>
    <button id="danger4" type="button" class="btn btn-default likert-4">4</button>
    <button id="danger5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="control1" type="button" class="btn btn-default likert-1">1</button>
    <button id="control2" type="button" class="btn btn-default likert-2">2</button>
    <button id="control3" type="button" class="btn btn-default likert-3">3</button>
    <button id="control4" type="button" class="btn btn-default likert-4">4</button>
    <button id="control5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>

其次，您可以将活动类添加到选定按钮，但首先将其从其所有同级中删除：

$(".btn.btn-default").click(function () {
    $(this).siblings().removeClass('active').end().addClass('active').val($(this).text());  
});

有关DOM中ID唯一性的更多信息，请快速查看docs。这会帮你省去很多麻烦。

Answer 2

你的错误1:每个项目的id值必须是唯一的。您的错误2:您必须使用class或其他方法按类型分隔点选择器

我想这会对你有帮助的。

www.codepen.io/airsakarya/pen/RaBMyE?editors=1010

Answer 3

首先，您不应该使用ids 来选择多个元素。Ids用于指定单个dom元素，请改用class。

第二，你可能搞砸了bootstrap的javascript。

尝试按照此example获取带有单选按钮的本机行为