1

I am using Symfony framework, and have a form that is autogenerated by EasyAdmin plugin. I need this form to only display radio input fields, but for whatever reason, EasyAdmin creates checkboxes instead and I have not found a way to change that.

The issue I am having is that when a user checks one of those checkboxes, all other checkboxes must be unchecked. In other words, emulating a radio input.

Here is the HTML that creates the checkbox:

  • note, this checkbox is checked. To uncheck a checkbox, the property btn-success is changed to btn-danger, and another property, named "off" is added, in the class declaration of the first div.
<!-- Change btn-success to btn-danger, and add an additional class named "off" to the following div in order to uncheck checkboxes -->
<div class="toggle btn btn-xs btn-success" data-toggle="toggle" style="width: 38px; height: 23px;">
    <input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
        <div class="toggle-group">
            <label class="btn btn-success btn-xs toggle-on">Yes</label>
            <label class="btn btn-danger btn-xs active toggle-off">No</label>
            <span class="toggle-handle btn btn-default btn-xs"></span>
        </div>
</div>

My code currently looks like this

$('#main').find('table .toggle input[type="checkbox"]').change(function() {
    $('#main').find('div .toggle .btn .btn-xs .btn-success').not($(this)).removeClass("on").removeClass("btn-success").addClass("btn-danger").addClass("off");

I have no error messages in the console; any help is greatly appreciated; this has been driving me nuts for the past two days :( });

Below is the current form and javascript that is not working:

$('#main').find('table .toggle input[type="checkbox"]').change(function() {
  $('#main').find('div .toggle .btn .btn-xs .btn-success').not($(this)).removeClass("on").removeClass("btn-success").addClass("btn-danger").addClass("off");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main" class="content">

  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>

          <th data-property-name="id" class="sorted  integer ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=ASC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-caret-down"></i> ID
            </a>
          </th>

          <th data-property-name="name" class="  string ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=name&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Name
            </a>
          </th>

          <th data-property-name="start_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=start_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Start date
            </a>
          </th>

          <th data-property-name="end_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=end_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> End date
            </a>
          </th>

          <th data-property-name="current" class="  toggle ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=current&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Current
            </a>
          </th>

          <th>
            <span>Actions</span>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr data-id="4">

          <td data-label="ID" class="sorted integer ">
            4

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2022-2023">SY 2022-2023</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2022-07-01T00:00:00-04:00" title="Fri, 01 Jul 2022 00:00:00 -0400">2022-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2023-06-30T00:00:00-04:00" title="Fri, 30 Jun 2023 00:00:00 -0400">2023-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-success btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" checked="" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/4">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="3">

          <td data-label="ID" class="sorted integer ">
            3

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2021-2022">SY 2021-2022</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2021-07-01T00:00:00-04:00" title="Thu, 01 Jul 2021 00:00:00 -0400">2021-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2022-06-30T00:00:00-04:00" title="Thu, 30 Jun 2022 00:00:00 -0400">2022-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/3">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="2">

          <td data-label="ID" class="sorted integer ">
            2

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2019-2020">SY 2019-2020</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2019-07-01T00:00:00-04:00" title="Mon, 01 Jul 2019 00:00:00 -0400">2019-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2020-06-30T00:00:00-04:00" title="Tue, 30 Jun 2020 00:00:00 -0400">2020-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/2">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="1">

          <td data-label="ID" class="sorted integer ">
            1

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2020-2021">SY 2020-2021</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2020-07-01T00:00:00-04:00" title="Wed, 01 Jul 2020 00:00:00 -0400">2020-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2021-06-30T00:00:00-04:00" title="Wed, 30 Jun 2021 00:00:00 -0400">2021-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-xs btn-danger off" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No" checked="checked">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/1">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Delete</a>

          </td>
        </tr>
      </tbody>
    </table>
  </div>


</section>

2
  • 1
    Please add a minimal reproducible example.
    – 0stone0
    Commented Apr 28, 2023 at 12:19
  • Having a hard time understanding what needs to be done using that JS code. Could you maybe add a more clear explanation what needs to be done when one of the current checkboxes is triggered?
    – 0stone0
    Commented Apr 28, 2023 at 13:12

3 Answers 3

Reset to default
2

You can hook to the table and then use that to find the check boxes. I used the first checked one to set initial state but if there are NONE you may need to adjust that.

A bit more verbose that it might need to be just to add clarity to the solution.

Per a comment made it ON always. IF you desire to programmatically turn them on/off you can change the 'change' event to a click

let $mainTable = $('#main').find('table tbody');
$mainTable.on('change', 'input[type="checkbox"]', function(event) {
  let $me = $(this);
  $me.prop("checked", true);
  let $parent = $(event.delegateTarget);
  let checks = $parent.find('input[type="checkbox"]');
  checks.not($me).prop("checked", false);
  checks.not($me).toggleClass('btn-danger off', true);
  $me.toggleClass("btn-success on", true).toggleClass('btn-danger off', false);
  // show the classes when checked/unchecked
  //console.log([...this.classList]);
});
// set up the first one as checked to mimic requirement; could be any one
$mainTable.find('input[type="checkbox"]')
  .first(':checked)')
  .trigger('change');
// now what classes it has we can log those
//console.log([...$mainTable.find('input[type="checkbox"]').first(':checked)')[0].classList]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main" class="content">
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th data-property-name="id" class="sorted  integer ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=ASC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-caret-down"></i> ID
            </a>
          </th>
          <th data-property-name="name" class="  string ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=name&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Name
            </a>
          </th>
          <th data-property-name="start_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=start_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Start date
            </a>
          </th>
          <th data-property-name="end_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=end_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> End date
            </a>
          </th>
          <th data-property-name="current" class="  toggle ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=current&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Current
            </a>
          </th>
          <th>
            <span>Actions</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr data-id="4">
          <td data-label="ID" class="sorted integer ">
            4
          </td>
          <td data-label="Name" class=" string ">
            <span title="SY 2022-2023">SY 2022-2023</span>
          </td>
          <td data-label="Start date" class=" date ">
            <time datetime="2022-07-01T00:00:00-04:00" title="Fri, 01 Jul 2022 00:00:00 -0400">2022-07-01</time>
          </td>
          <td data-label="End date" class=" date ">
            <time datetime="2023-06-30T00:00:00-04:00" title="Fri, 30 Jun 2023 00:00:00 -0400">2023-06-30</time>
          </td>
          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-success btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" checked="" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>
          </td>
          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/4">View</a>
            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Edit</a>
            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Delete</a>
          </td>
        </tr>
        <tr data-id="3">
          <td data-label="ID" class="sorted integer ">
            3
          </td>
          <td data-label="Name" class=" string ">
            <span title="SY 2021-2022">SY 2021-2022</span>
          </td>
          <td data-label="Start date" class=" date ">
            <time datetime="2021-07-01T00:00:00-04:00" title="Thu, 01 Jul 2021 00:00:00 -0400">2021-07-01</time>
          </td>
          <td data-label="End date" class=" date ">
            <time datetime="2022-06-30T00:00:00-04:00" title="Thu, 30 Jun 2022 00:00:00 -0400">2022-06-30</time>
          </td>
          <td data-label="Current" class=" toggle ">
            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>
          </td>
          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/3">View</a>
            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Edit</a>
            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Delete</a>
          </td>
        </tr>
        <tr data-id="2">
          <td data-label="ID" class="sorted integer ">
            2
          </td>
          <td data-label="Name" class=" string ">
            <span title="SY 2019-2020">SY 2019-2020</span>
          </td>
          <td data-label="Start date" class=" date ">
            <time datetime="2019-07-01T00:00:00-04:00" title="Mon, 01 Jul 2019 00:00:00 -0400">2019-07-01</time>
          </td>
          <td data-label="End date" class=" date ">
            <time datetime="2020-06-30T00:00:00-04:00" title="Tue, 30 Jun 2020 00:00:00 -0400">2020-06-30</time>
          </td>
          <td data-label="Current" class=" toggle ">
            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>
          </td>
          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/2">View</a>
            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Edit</a>
            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Delete</a>
          </td>
        </tr>
        <tr data-id="1">
          <td data-label="ID" class="sorted integer ">
            1
          </td>
          <td data-label="Name" class=" string ">
            <span title="SY 2020-2021">SY 2020-2021</span>
          </td>
          <td data-label="Start date" class=" date ">
            <time datetime="2020-07-01T00:00:00-04:00" title="Wed, 01 Jul 2020 00:00:00 -0400">2020-07-01</time>
          </td>
          <td data-label="End date" class=" date ">
            <time datetime="2021-06-30T00:00:00-04:00" title="Wed, 30 Jun 2021 00:00:00 -0400">2021-06-30</time>
          </td>
          <td data-label="Current" class=" toggle ">
            <div class="toggle btn btn-xs btn-danger off" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No" checked="checked">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>
          </td>
          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/1">View</a>
            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Edit</a>
            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Delete</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

7
  • Interesting answer and it works. Upvoted...One small detail is missing though. If I click on a checked checkbox, then it will be unchecked. If we are to emulate radio buttons, then the checked item might need to remain checked when being clicked. I created two snippets in my answer to provide a solution for both possible cases.
    – Lajos Arpad
    Commented Apr 28, 2023 at 23:05
  • That is an easy fix to just turn it ON for the one with the "change" event....
    – Mark Schultheiss
    Commented Apr 28, 2023 at 23:07
  • 1
    That's why I called it a "small detail". Yet, beginners may have trouble doing it. A small remark in your answer providing this information to them may help your readers.
    – Lajos Arpad
    Commented Apr 28, 2023 at 23:11
  • 1
    I updated that and added a note regarding the change vs click which may come into play also.
    – Mark Schultheiss
    Commented Apr 28, 2023 at 23:12
  • Thanks, Mark! I find your answer to be very good now.
    – Lajos Arpad
    Commented Apr 28, 2023 at 23:14
1
+50

You manipulate classes of your checkboxes in your change event handler. This is not how you check/uncheck checkboxes.

Please read this check / uncheck checkbox using jquery? and this jQuery. How to uncheck all checkboxes except one (which was checked)

Here is how you can do it:

$('#main').find('table .toggle input[type="checkbox"]').change(function() {
  $('table .toggle input[type="checkbox"]').prop('checked', false);
  $(this).prop('checked', true);
});

Here is working example: https://jsfiddle.net/fL9dknp7/

1

You can use a semaphore, so, if any element is clicked, any other element will be clicked. When we click the other elements, we set a semaphore to "red", so our code will know they are to be handled in a different manner. When we finish clicking the other items, we set our semaphore back to "green".

So, at a click event, if the semaphore is "green", we temporarily set it to "red" and click all the other checkboxes and then set it back to red. In the snippet below we have just that, but it's not yet a radio button behavior, because if we click the only checked element, then it's unchecked:

let tables = $('table');
for (let table of tables) {
    let semaphore = 'green';
    let checkboxes = tables.find('.toggle input[type="checkbox"]');
    checkboxes.click(function() {
        if (semaphore === 'green') {
            semaphore = 'red';
            let current = this;
            checkboxes.each(function() {
                if ((current !== this) && (this.checked)) this.click();
            });
            semaphore = 'green';
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main" class="content">

  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>

          <th data-property-name="id" class="sorted  integer ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=ASC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-caret-down"></i> ID
            </a>
          </th>

          <th data-property-name="name" class="  string ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=name&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Name
            </a>
          </th>

          <th data-property-name="start_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=start_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Start date
            </a>
          </th>

          <th data-property-name="end_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=end_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> End date
            </a>
          </th>

          <th data-property-name="current" class="  toggle ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=current&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Current
            </a>
          </th>

          <th>
            <span>Actions</span>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr data-id="4">

          <td data-label="ID" class="sorted integer ">
            4

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2022-2023">SY 2022-2023</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2022-07-01T00:00:00-04:00" title="Fri, 01 Jul 2022 00:00:00 -0400">2022-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2023-06-30T00:00:00-04:00" title="Fri, 30 Jun 2023 00:00:00 -0400">2023-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-success btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/4">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="3">

          <td data-label="ID" class="sorted integer ">
            3

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2021-2022">SY 2021-2022</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2021-07-01T00:00:00-04:00" title="Thu, 01 Jul 2021 00:00:00 -0400">2021-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2022-06-30T00:00:00-04:00" title="Thu, 30 Jun 2022 00:00:00 -0400">2022-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/3">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="2">

          <td data-label="ID" class="sorted integer ">
            2

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2019-2020">SY 2019-2020</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2019-07-01T00:00:00-04:00" title="Mon, 01 Jul 2019 00:00:00 -0400">2019-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2020-06-30T00:00:00-04:00" title="Tue, 30 Jun 2020 00:00:00 -0400">2020-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/2">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="1">

          <td data-label="ID" class="sorted integer ">
            1

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2020-2021">SY 2020-2021</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2020-07-01T00:00:00-04:00" title="Wed, 01 Jul 2020 00:00:00 -0400">2020-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2021-06-30T00:00:00-04:00" title="Wed, 30 Jun 2021 00:00:00 -0400">2021-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-xs btn-danger off" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No" checked="checked">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/1">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Delete</a>

          </td>
        </tr>
      </tbody>
    </table>
  </div>


</section>

In the snippet below we converted our code so if you clicked the active element, it will not be deactivated:

let tables = $('table');
for (let table of tables) {
    let semaphore = 'green';
    let checkboxes = tables.find('.toggle input[type="checkbox"]');
    checkboxes.click(function() {
        if (!this.checked) {
            if (semaphore === 'green') {
                semaphore = 'red';
                this.click();
                semaphore = 'green';
            }
        } else {
            if (semaphore === 'green') {
                semaphore = 'red';
                let current = this;
                checkboxes.each(function() {
                    if ((current !== this) && (this.checked)) this.click();
                });
                semaphore = 'green';
            }
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main" class="content">

  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>

          <th data-property-name="id" class="sorted  integer ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=ASC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-caret-down"></i> ID
            </a>
          </th>

          <th data-property-name="name" class="  string ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=name&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Name
            </a>
          </th>

          <th data-property-name="start_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=start_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Start date
            </a>
          </th>

          <th data-property-name="end_date" class="  date ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=end_date&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> End date
            </a>
          </th>

          <th data-property-name="current" class="  toggle ">
            <a href="/admin/?action=list&amp;entity=SchoolYear&amp;sortField=current&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1">
              <i class="fa fa-sort"></i> Current
            </a>
          </th>

          <th>
            <span>Actions</span>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr data-id="4">

          <td data-label="ID" class="sorted integer ">
            4

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2022-2023">SY 2022-2023</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2022-07-01T00:00:00-04:00" title="Fri, 01 Jul 2022 00:00:00 -0400">2022-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2023-06-30T00:00:00-04:00" title="Fri, 30 Jun 2023 00:00:00 -0400">2023-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-success btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/4">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=4"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="3">

          <td data-label="ID" class="sorted integer ">
            3

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2021-2022">SY 2021-2022</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2021-07-01T00:00:00-04:00" title="Thu, 01 Jul 2021 00:00:00 -0400">2021-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2022-06-30T00:00:00-04:00" title="Thu, 30 Jun 2022 00:00:00 -0400">2022-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/3">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=3"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="2">

          <td data-label="ID" class="sorted integer ">
            2

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2019-2020">SY 2019-2020</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2019-07-01T00:00:00-04:00" title="Mon, 01 Jul 2019 00:00:00 -0400">2019-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2020-06-30T00:00:00-04:00" title="Tue, 30 Jun 2020 00:00:00 -0400">2020-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-danger off btn-xs" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/2">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=2"
              target="_self">Delete</a>

          </td>
        </tr>
        <tr data-id="1">

          <td data-label="ID" class="sorted integer ">
            1

          </td>

          <td data-label="Name" class=" string ">
            <span title="SY 2020-2021">SY 2020-2021</span>

          </td>

          <td data-label="Start date" class=" date ">
            <time datetime="2020-07-01T00:00:00-04:00" title="Wed, 01 Jul 2020 00:00:00 -0400">2020-07-01</time>

          </td>

          <td data-label="End date" class=" date ">
            <time datetime="2021-06-30T00:00:00-04:00" title="Wed, 30 Jun 2021 00:00:00 -0400">2021-06-30</time>

          </td>

          <td data-label="Current" class=" toggle ">

            <div class="toggle btn btn-xs btn-danger off" data-toggle="toggle" style="width: 38px; height: 23px;"><input type="checkbox" data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="Yes" data-off="No" checked="checked">
              <div class="toggle-group"><label class="btn btn-success btn-xs toggle-on">Yes</label><label class="btn btn-danger btn-xs active toggle-off">No</label><span class="toggle-handle btn btn-default btn-xs"></span></div>
            </div>

          </td>

          <td data-label="Actions" class="actions">
            <a href="http://localhost:8000/view-program/1">View</a>

            <a class="text-primary action-edit" title="" href="/admin/?action=edit&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Edit</a>

            <a class="text-danger action-delete" title="" href="/admin/?action=delete&amp;entity=SchoolYear&amp;sortField=id&amp;sortDirection=DESC&amp;page=1&amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;id=1"
              target="_self">Delete</a>

          </td>
        </tr>
      </tbody>
    </table>
  </div>


</section>

Here, if the status of checked would be false (we are unchecking), then we click on it again to negate the click.

Not the answer you're looking for? Browse other questions tagged or ask your own question.