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&entity=SchoolYear&sortField=id&sortDirection=ASC&page=1&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&entity=SchoolYear&sortField=name&sortDirection=DESC&page=1&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&entity=SchoolYear&sortField=start_date&sortDirection=DESC&page=1&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&entity=SchoolYear&sortField=end_date&sortDirection=DESC&page=1&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&entity=SchoolYear&sortField=current&sortDirection=DESC&page=1&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&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=4"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&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&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=3"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&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&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=2"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&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&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=1"
target="_self">Edit</a>
<a class="text-danger action-delete" title="" href="/admin/?action=delete&entity=SchoolYear&sortField=id&sortDirection=DESC&page=1&referer=%252Fadmin%252F%253Faction%253Dlist%2526entity%253DSchoolYear%2526sortField%253Did%2526sortDirection%253DDESC%2526page%253D1&id=1"
target="_self">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
3
Answers
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:
Here is working example: https://jsfiddle.net/fL9dknp7/
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 aclick
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:
In the snippet below we converted our code so if you clicked the active element, it will not be deactivated:
Here, if the status of
checked
would be false (we are unchecking), then we click on it again to negate the click.