lundi 30 octobre 2017

Swap to select box once checkbox is checked

Checkboxes

I've got these set of checkboxes. They correspond to the days on which people are available for work. This system will be used to create a 'work schedule'. However, when the boss checks a checkbox (to have people work on that certain day), it should change to a select box so that the boss can tell where people will be working.

The checkboxes get their name in this way: {UserID}_[]. The value of the checkbox corresponds to the day in the week (Monday -> 0, Tuesday -> 1, Wednesday -> 2 etc.). The select box is made in this way: {UserID}_select_[].

I tried to use the following type of jquery script to get this working:

<script>
    var userList = <?php echo json_encode($userIdList); ?>;

    function swapInput(obj) {
        for (var i in obj) {
            $(document).ready(function() {
                $("input[name='" + obj[i] + "_[]']").change(function() {
                    if ($(this).prop('checked')) {
                        $(this).hide();
                        $('input[name="' + obj[i] + '_select_['$(this).val()']"]').show();
                    }
                }
            }
        }
    }

    swapInput(userList);

</script>

However, I'm quite new to jquery, so I might need some help there. I retrieve a php array from a database to get all the user ID's of which we have an availability. This one is converted to a jquery variable. I try to loop through that to get every single ID and make a line of code to hide the checkbox. Though.. it does not work.. as always...

When I var_dump the userIdList php variable, this is my result:

array(3) { [0]=> int(1) [1]=> int(2) [2]=> int(4) }

This means the user ID's are 1, 2 and 4. But who can help me with the jquery part?




Aucun commentaire:

Enregistrer un commentaire