how to change child attribute jquery

Question

I would like to use this from Bootstrap but with my Laravel Collective functions the option state button won't change to the correct state. So I want to change it myself with jQuery.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

(original HTML from getbootstrap.com)

Which I re-wrote to:

<div id ="addproductsort" class="btn-group btn-group-toggle" data-toggle="buttons">
  <label id="productsort" class="btn btn-secondary active">
    {{Form::radio('options', 'one', false, ['name' => 'options', 'autocomplete' => 'off', 'class' => 'productsortoption'])}}
            one
  </label>
  <label id="productsort" class="btn btn-secondary">
    {{Form::radio('options', 'two', false, ['name' => 'options', 'id' => 'option2', 'autocomplete' => 'off', 'class' => 'productsortoption'])}}
            two
  </label>
  <label id="productsort" class="btn btn-secondary">
    {{Form::radio('options', 'three', false, ['name' => 'options', 'id' => 'option2', 'autocomplete' => 'off', 'class' => 'productsortoption'])}}
            three
  </label>
</div>

This is the script I got:

$('#productsort').each(function() {  
  $(this).on('click', function() {  
    if($(this).hasClass('active')) {
      $(this).children().attr( "checked", "checked" );
    };
  });
});

When I click the first button one, the state of the option child does change, but when I click the second or the third button nothing happens.

What's wrong in here? Thanks in advance.

Answer 1

I think you're looking for something like this example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="btn-group" role="group" aria-label="Basic example">
  <label class="btn btn-secondary">
    <input type="radio" name="radio" />
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="radio" />
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="radio" />
  </label>
</div>

In this example, I've created 3 radio buttons and wrapped all of them by 3 labels.

Because the 3 radio buttons have the same name (radio), we don't need to use jquery to catch onclick event.

---

Note: id property must contain unique value. You cannot create multiple elements which have the same id value. In that case, you could use class instead. It's useful when you want to delete some element with a specific id.

---

maybe i'm seeing i wrong, because my understanding was that "onclick" the option state should be set to "checked", but when i view the original HTML on 'getbootstrap' the checked state doesn't change, it's only set to "checked" on the first option

That's because of this line:

<label id="productsort" class="btn btn-secondary active">
    ...
</label>

The first label with the id productsort has class active. The second label and the third label don't have.

If you want to use jquery, you could try:

$('.productsort').on('click', function() {  
    // using "find" method to find an element that has class "active" from "addproductsort"
    // then, using "removeClass" method to remove the class "active" on the element
    $('#addproductsort').find('.active').removeClass('active');

    // all of the 3 labels don't have class "active" here
    // you can stop the code from here to check html code

    // we add class "active" to this label/element because it was clicked
    $(this).addClass('active').children().attr("checked", "checked");

    // or
    // $(this).addClass('active').children().prop("checked", true);
});

NOTE: I've change id="productsort" to class="productsort" in this example.

Answer 2

This is the final solution, i added

$('.productsortoption').removeAttr('checked');

to remove the "checked" state when ".productsort" isn't active.

$('.productsort').on('click', function() {  
     $('#addproductsort').find('.active').removeClass('active');
     $('.productsortoption').removeAttr('checked');
     $(this).addClass('active').children().attr("checked", "checked");
});

HTML

<div id ="addproductsort" class="w-100 btn-group btn-group-toggle" data-toggle="buttons">
    <label class="productsort">
        <input name="options" autocomplete="off" class="productsortoption" type="radio" value="Sale">
        one
    </label>
    <label class="productsort">
        <input name="options" id="option2" autocomplete="off" class="productsortoption" type="radio" value="two">
        two
    </label>
    <label class="productsort">
        <input name="options" id="option2" autocomplete="off" class="productsortoption" type="radio" value="three">
        three
    </label>
  </div>