X'Byte X'Byte - 7 months ago 11
Javascript Question

Keeping button selected

I have the following three likert scales:

<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>


and the following script:

$(".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());
}
});


However after selecting the first likert scale, and a selection is made on the second likert scale the selection of the first is lost. See gif:


Answer

First, you shouldn't have duplicated IDs. Change them for the below:

<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>

Second, you can add an active class to the selected button, but first remove it from all its siblings:

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

Please have a quick look at the docs for more information about ID uniqueness in the DOM. This will save you a lot of headaches.