搜尋

首頁  >  問答  >  主體

如何在選取一個複選框後取消選取其他複選框?

<p>我正在使用 Symfony 框架,并且有一个由 EasyAdmin 插件自动生成的表单。我需要此表单仅显示无线电输入字段,但无论出于何种原因,EasyAdmin 都会创建复选框,而我还没有找到更改它的方法。</p> <p>我遇到的问题是,当用户选中其中一个复选框时,必须取消选中所有其他复选框。换句话说,模拟无线电输入。</p> <p>以下是创建复选框的 HTML:</p> <ul> <li>请注意,此复选框已选中。要取消选中复选框,请将属性<strong>btn-success</strong>更改为<strong>btn-danger</strong>,并添加另一个名为“<strong>off</strong>”的属性,第一个 div 的类声明。</li> </ul> <pre class="brush:php;toolbar:false;"><!-- 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></pre> <p>我的代码目前看起来像这样</p> <pre class="brush:php;toolbar:false;">$('#main').find('table .toggle input[type=&quot;checkbox&quot;]').change(function() { $('#main').find('div .toggle .btn .btn-xs .btn-success').not($(this)).removeClass(&quot;on&quot;).removeClass(&quot;btn-success&quot;).addClass(&quot;btn-danger&quot;).addClass(&quot;off&quot;);</pre> <p>控制台中没有错误消息;任何帮助是极大的赞赏;过去两天这让我发疯:( });</p> <p>下面是当前不起作用的表单和 JavaScript:</p> <p> <pre class="snippet-code-js lang-js prettyprint-override"><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></pre> <pre class="snippet-code-html lang-html prettyprint-override"><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></pre> </p>
P粉436688931P粉436688931443 天前663

全部回覆(2)我來回復

  • P粉765684602

    P粉7656846022023-09-03 16:34:18

    您可以掛鉤表格,然後使用它來尋找複選框。我使用第一個檢查的來設定初始狀態,但如果沒有,您可能需要調整它。

    可能需要更詳細一點,只是為了讓解決方案更加清晰。

    每一則評論都使其始終處於開啟狀態。如果您希望以程式設計方式開啟/關閉它們,您可以將 '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>

    回覆
    0
  • P粉311464935

    P粉3114649352023-09-03 11:19:13

    您可以在變更事件處理程序中操作複選框的類別。這不是選中/取消選中復選框的方式。

    請閱讀此使用 jquery 選取/取消選取複選框? 和這個 jQuery。如何取消選取除一個(已選取)之外的所有複選框

    以下是具體操作方法:

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

    這是工作範例:https://jsfiddle.net/fL9dknp7/

    #

    回覆
    0
  • 取消回覆