Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
33
rated 0 times [  34] [ 1]  / answers: 1 / hits: 7329  / 10 Years ago, thu, april 17, 2014, 12:00:00

Basically its an availability schedule calendar.
Seven checkboxes has the same class. Then other seven boxes has the same class. There are total of 49 checkboxes and total 7 classes. So I want these checkboxes to behave like radio buttons. i.e No two checkboxes of same class can be checked at a time. For example, If someone checks the box with class 'earlyMorning' . When he checks the other checkbox with the same class the first one should be unchecked. Here is my html. Right now writing only 21 checkboxes.



<table> <tr>
<th>Early Morning<br /><small>6am-9am</small></th>
<td><input type=checkbox class=earlyMorning name=field_807[] id=field_871_0 value=Early Morning 6am-9am Monday style=display: none;></td>
<td><input type=checkbox class=lateMorning name=field_807[] id=field_872_1 value=Early Morning 6am-9am Tuesday style=display: none;></td>
<td><input type=checkbox class=earlyAfternoon name=field_807[] id=field_873_2 value=Early Morning 6am-9am Wednesday style=display: none;></td>
<td><input type=checkbox class=lateAfternoon name=field_807[] id=field_874_3 value=Early Morning 6am-9am Thursday style=display: none;></th>
<td><input type=checkbox class=earlyEvening name=field_807[] id=field_875_4 value=Early Morning 6am-9am Friday style=display: none;></td>
<td><input type=checkbox class=lateEvening name=field_807[] id=field_876_5 value=Early Morning 6am-9am Saturday style=display: none;></td>
<td><input type=checkbox class=overnight name=field_807[] id=field_877_6 value=Overnight 12am-6am Sunday style=display: none;></td>
</tr>

<tr>
<th>Late Morning<br /><small>9am-12pm</small></th>
<td><input type=checkbox class=earlyMorning name=field_807[] id=field_878_7 value=Late Morning 9am-12pm Monday style=display: none;></td>
<td><input type=checkbox class=lateMorning name=field_807[] id=field_879_8 value=Late Morning 9am-12pm Tuesday style=display: none;></td>
<td><input type=checkbox class=earlyAfternoon name=field_807[] id=field_880_9 value=Late Morning 9am-12pm Wednesday style=display: none;></td>
<td><input type=checkbox class=lateAfternoon name=field_807[] id=field_881_10 value=Late Morning 9am-12pm Thursday style=display: none;></th>
<td><input type=checkbox class=earlyEvening name=field_807[] id=field_882_11 value=Late Morning 9am-12pm Friday style=display: none;></td>
<td><input type=checkbox class=lateEvening name=field_807[] id=field_883_12 value=Late Morning 9am-12pm Saturday style=display: none;></td>
<td><input type=checkbox class=overnight name=field_807[] id=field_884_13 value=Overnight 12am-6am Sunday style=display: none;></td>
</tr>

<tr>
<th>Early Afternoon<br /><small>12pm-3pm</small></th>
<td><input type=checkbox class=earlyMorning name=field_807[] id=field_885_14 value=Early Afternoon 12pm-3pm Monday style=display: none;></td>
<td><input type=checkbox class=lateMorning name=field_807[] id=field_886_15 value=Early Afternoon 12pm-3pm Tuesday style=display: none;></td>
<td><input type=checkbox class=earlyAfternoon name=field_807[] id=field_887_16 value=Early Afternoon 12pm-3pm Wednesday style=display: none;></td>
<td><input type=checkbox class=lateAfternoon name=field_807[] id=field_888_17 value=Early Afternoon 12pm-3pm Thursday style=display: none;></th>
<td><input type=checkbox class=earlyEvening name=field_807[] id=field_889_18 value=Early Afternoon 12pm-3pm Friday style=display: none;></td>
<td><input type=checkbox class=lateEvening name=field_807[] id=field_890_19 value=Early Afternoon 12pm-3pm Saturday style=display: none;></td>
<td><input type=checkbox class=overnight name=field_807[] id=field_891_20 value=Overnight 12am-6am Sunday style=display: none;></td>
</tr></table>


I have found a nice example here but its not working in my case.
make checkbox behave like radio buttons with javascript



Based on the above tutorial, I tried this but not working



$(.earlyMorning).each(function()
{
$(this).change(function()
{
$(.earlyMorning).prop('checked',false);
$(this).prop('checked',true);
});
});

More From » html

 Answers
7

My solution using jQuery:



        $(document).ready(function() {
$('input').click(function() {
var input_class = $(this).attr('class');

$('.'+input_class).prop('checked', false);

$(this).prop('checked', true);
});
});


On every click on a checkbox, all checkboxes with the same class get un-checked before checking the clicked element.



I hope this helps.


[#45943] Wednesday, April 16, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
nellykaliae

Total Points: 119
Total Questions: 95
Total Answers: 103

Location: Pitcairn Islands
Member since Fri, Oct 15, 2021
3 Years ago
;