Bagaimana untuk menyahtanda satu kotak pilihan selepas menandai kotak pilihan lain?

Question

我正在使用 Symfony 框架，并且有一个由 EasyAdmin 插件自动生成的表单。我需要此表单仅显示无线电输入字段，但无论出于何种原因，EasyAdmin 都会创建复选框，而我还没有找到更改它的方法。

我遇到的问题是，当用户选中其中一个复选框时，必须取消选中所有其他复选框。换句话说，模拟无线电输入。

以下是创建复选框的 HTML：

• 请注意，此复选框已选中。要取消选中复选框，请将属性btn-success更改为btn-danger，并添加另一个名为“off”的属性，第一个 div 的类声明。

<!-- Change btn-success to btn-danger, and add an additional class named &quot;off&quot; to the following div in order to uncheck checkboxes -->
<div class=&quot;toggle btn btn-xs btn-success&quot; data-toggle=&quot;toggle&quot; style=&quot;width: 38px; height: 23px;&quot;>
    <input type=&quot;checkbox&quot; data-toggle=&quot;toggle&quot; data-size=&quot;mini&quot; data-onstyle=&quot;success&quot; data-offstyle=&quot;danger&quot; data-on=&quot;Yes&quot; data-off=&quot;No&quot;>
        <div class=&quot;toggle-group&quot;>
            <label class=&quot;btn btn-success btn-xs toggle-on&quot;>Yes</label>
            <label class=&quot;btn btn-danger btn-xs active toggle-off&quot;>No</label>
            <span class=&quot;toggle-handle btn btn-default btn-xs&quot;></span>
        </div>
</div>

我的代码目前看起来像这样

$('#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");

控制台中没有错误消息；任何帮助是极大的赞赏;过去两天这让我发疯:( });

下面是当前不起作用的表单和 JavaScript：

<code>$('#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");
});</code>

<code><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;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=ASC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=name&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=start_date&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=end_date&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=current&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;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;amp;entity=SchoolYear&amp;amp;sortField=id&amp;amp;sortDirection=DESC&amp;amp;page=1&amp;amp;referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&amp;amp;id=4"
              target="_self">Edit</a>

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

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

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

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

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


</section></code>

Answer 1

Anda boleh mengaitkan meja dan kemudian menggunakannya untuk mencari kotak pilihan. Saya menggunakan yang pertama diperiksa untuk menetapkan keadaan awal, tetapi jika tidak, anda mungkin perlu menyesuaikannya.

Mungkin memerlukan perincian lebih sedikit, hanya untuk menjadikan penyelesaiannya lebih jelas.

Setiap komen menjadikannya sentiasa terbuka. Jika anda ingin menghidupkan/mematikan secara berprogram, anda boleh 'change' 事件更改为 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>

Answer 2

Anda boleh memanipulasi kelas kotak pilihan dalam pengendali acara perubahan. Ini bukan cara anda menanda/menyahtanda kotak pilihan.

Sila baca ini Tandakan/nyahtanda kotak semak menggunakan jquery? dan ini jQuery. Bagaimana untuk menyahtanda semua kotak pilihan kecuali satu (sudah ditanda)

Berikut adalah kaedah operasi khusus:

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

Berikut ialah contoh yang berfungsi: https://jsfiddle.net/fL9dknp7/