vendredi 31 juillet 2015

Several checkboxes and validation jQuery

I am doing a questionnaire with several checkboxes (yes, no) and if all are ´no´ the below fields should be readonly and disabled, but if there are any ´yes´, the fields should be required. All the questionnaire is inside a table and two checkboxes for each tr.

I´m trying many things but I´m sure someone has better ideas than me.

The HTML code is the following:

<table class="table questionnaire">
                <thead>
                    <tr>
                        <th>Is required?</th>
                        <th>YES</th>
                        <th>NO</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="quest" class="quest">
                        <td>Q1</td>
                        <td><input type="checkbox" id="ques_Q1y" name="ques_Q1y" class="table quest_q"></td>
                        <td><input type="checkbox" id="ques_Q1n" name="ques_Q1n" class="table quest_q"></td>
                    </tr>
                    <tr id="quest" class="quest">
                        <td>Q2</td>
                        <td><input type="checkbox" id="ques_Q2y" name="ques_Q2y" class="table quest_q"></td>
                        <td><input type="checkbox" id="ques_Q2n" name="ques_Q2n" class="table quest_q"></td>
                    </tr>
                    <tr  id="quest" class="quest">
                        <td>Q3</td>
                        <td><input type="checkbox" id="ques_Q3y" name="ques_Q3y" class="table quest_q"></td>
                        <td><input type="checkbox" id="ques_Q3n" name="ques_Q3n" class="table quest_q"></td>
                    </tr>
                    <tr  id="quest" class="quest">
                        <td>Q4</td>
                        <td><input type="checkbox" id="ques_Q4y" name="ques_Q4y" class="table quest_q"></td>
                        <td><input type="checkbox" id="ques_Q4n" name="ques_Q4n" class="table quest_q"></td>
                    </tr>
                </tbody>
            </table>

                <div id="fields" class="fields">
                     <select class="pos" id="pos" name="pos"></select>
                     <input type="number" step="1" class="len" id="len" name="len">
                     <input type="number" step="1" class="he" id="he" name="he">
                     <select class="perm" id="perm" name="perm"></select>
                </div>

I want to make the fields below (input and selects) readable or required, depends on the checkboxes. My Jquery script is active when change checkboxes as follows:

  $("input[type='checkbox'][name^='ques_']:checkbox").change(function() {
//Code
});

That´s my way to check when checkboxes are selected, but I don´t know how to know if there are a yes or no and how to count it to make the other fields required or readable.

If any of you have some idea, thank for the help




Aucun commentaire:

Enregistrer un commentaire