Is there a way to allow only one check box on each row to me checked?

Question

hi i am trying to create a form where user selects either am or pm sessions for each day of the week except Monday where only am is available.

my code is currently:

    <table border="0" id="EnrollPreSes">        
    <tr>
        <td>Day</td>
        <td>AM <br/> 8:30 - 11:30 </td>
        <td>PM <br/> 12:00 - 3:00</td>
    </tr>
    <tr>
        <td>Monday</td>
        <td><input type="checkbox" name="Prefses[]" id="mam" value="MonAM"></td>
        <td></td>
    </tr>
    <tr>
        <td>Tuesday</td>
        <td>
                 <input type="radio" name="Prefses" value="TueAM">  
        </td>
        <td>
            <input type="radio" name="Prefses" value="TuePM">
        </td>
    </tr>
    <tr>
        <td>Wednesday</td>
        <td>
            <input type="radio" name="Prefses" value="WedAM">
        </td>
        <td>
            <input type="radio" name="Prefses" value="WedPM">
        </td>
    </tr>
</table>

and so on for the rest of the week, is there a way to allow only an am or pm slot for each day to be selected and then be sent to my php script as an array?

would that work tho as they can have for instance monday am tuesday pm wednesday Pm thursday am friday am ? — Mattyboi1670, Jan 24 '13 at 13:23
yes each row would have their own linked check boxes just means you'll have to request 7 days worth of post vars (only 7 as 2 checkboxes respond as one when linked) — Dave, Jan 24 '13 at 13:25

Niall Paterson · Answer 1 · 2013-01-25T13:14:37.397

0

It'd be easier to have one Am radio and one Pm radio, but if you really want it:

$(document).ready(function () {
    $('input > radio').click(function () {
        $(this).siblings().removeAttr('checked');
    )}
)}

I know you've a checkbox for monday so it could be adapted to accommodate both.

edited Jan 25 '13 at 13:14

answered Jan 24 '13 at 13:24

Niall Paterson

3,580
3
29
37

would this just be added into – Mattyboi1670 Jan 24 '13 at 13:31
exactly. but you'll have to include jquery aswell :) its that simple – Niall Paterson Jan 24 '13 at 13:39

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

A pointed out in this answer using jquery you can add class unique to your checkbox and then:

var $unique = $('input.unique');
$unique.click(function() {
$unique.filter(':checked').not(this).removeAttr('checked');

});

edited May 23 '17 at 11:49

Community

1
1

answered Jan 24 '13 at 13:24

v0d1ch

2,738
1
22
27

between he script tags in the head of your document and don't forget to add class="unique" to your checkbox and include jquery at the top of the page – v0d1ch Jan 24 '13 at 13:45

score 0 · Accepted Answer · answered Jan 24 '13 at 13:33

Give each rows radio buttons the same name, jsFiddle here:

http://jsfiddle.net/QTCy2/8/

<form id="EnrollPreSes">
<table border="0" id="EnrollPreSes">        
    <tr>
        <td>Day</td>
        <td>AM <br/> 8:30 - 11:30 </td>
        <td>PM <br/> 12:00 - 3:00</td>
    </tr>
    <tr>
        <td>Monday</td>
        <td>
        <input type="radio" name="monday" value="MonAM">  
        </td>
        <td>
            <input type="radio" name="monday" value="MonPM">
        </td>
    </tr>
    <tr>
        <td>Tuesday</td>
        <td>
                 <input type="radio" name="tuesday" value="TueAM">  
        </td>
        <td>
            <input type="radio" name="tuesday" value="TuePM">
        </td>
    </tr>
    <tr>
        <td>Wednesday</td>
        <td>
            <input type="radio" name="wednesday" value="WedAM">
        </td>
        <td>
            <input type="radio" name="wednesday" value="WedPM">
        </td>
    </tr>
</table>

       <input type="submit" value="Submit">

</form>

$(function(){
    $('#EnrollPreSes').on('submit', function() {
       alert($(this).serialize()); //Send to your PHP script
        return false; 
    });
});

Is there a way to allow only one check box on each row to me checked?

3 Answers3