Steaphann
Steaphann

Reputation: 121

Checkbox problem

I want to put the value of my checkbox on a label of zitplaats. Could anybody help me ?

<html>
<head>
    <title> Reserverings-formulier </title>
    <style type="text/css">

    </style>
           <script src="<?php  echo base_url().'/jquery-1.4.1.min.js'?>"> </script>
    <script type ="text/javascript">
        function process(){
            var l = $('[name=check]:checked').length;


            if(l>=1){
                $('[name=check]').each(function(i,d){
                    if(!$(d).is(":checked")){
                        $(d).attr('disabled','disabled');

                    }
                });
            }else{
                $('[name=check]').each(function(i,d){
                    $(d).removeAttr('disabled');
                });
            }
        }
    </script>
</head>
<body>
    <h1> reservering </h1>
    <p> vul in de onderste gegevens in. </p>
     <?php echo validation_errors() ?>
    <?php

        echo form_open($base_url . 'User/register3');

        $username = array(
           'name'       =>  'reg_username',
            'id'        =>  'reg_username',
            'value'     =>  ''
        );
           $email = array(
           'name'       =>  'reg_email',
            'id'        =>  'reg_email',
            'value'     =>  ''
        );
            $gsmnummer = array(
           'name'       =>  'reg_gsmnummer',
            'id'        =>  'reg_gsmnummer',
            'value'     =>  ''
        );
            $zitplaats = array(
           'name'       =>  'reg_zitplaats',
            'id'        =>  'reg_zitplaats',
            'value'     =>  ''
        );
        $username2 = array(
           'name'       =>  'reg_username',
            'id'        =>  'reg_username',
            'value'     =>  ''
        );
           $email2 = array(
           'name'       =>  'reg_email',
            'id'        =>  'reg_email',
            'value'     =>  ''
        );
            $gsmnummer2 = array(
           'name'       =>  'reg_gsmnummer',
            'id'        =>  'reg_gsmnummer',
            'value'     =>  ''
        );
            $zitplaats2 = array(
           'name'       =>  'reg_zitplaats',
            'id'        =>  'reg_zitplaats',
            'value'     =>  ''
        );
          $username3 = array(
           'name'       =>  'reg_username',
            'id'        =>  'reg_username',
            'value'     =>  ''
        );
           $email3 = array(
           'name'       =>  'reg_email',
            'id'        =>  'reg_email',
            'value'     =>  ''
        );
            $gsmnummer3 = array(
           'name'       =>  'reg_gsmnummer',
            'id'        =>  'reg_gsmnummer',
            'value'     =>  ''
        );
            $zitplaats3 = array(
           'name'       =>  'reg_zitplaats',
            'id'        =>  'reg_zitplaats',
            'value'     =>  ''
        );
    ?>
    <table>
        <tr>
           <td><label> Naam </label></td>
           <td> <div> <?php echo form_input($username); ?></div></td>
            <td><label> Naam </label></td>
           <td> <div> <?php echo form_input($username2); ?></div></td>
           <td><label> Naam </label></td>
           <td> <div> <?php echo form_input($username3); ?></div></td>
       </tr>
        <tr>
             <td><label>e-mail </label></td>
            <td><div> <?php echo form_input($email); ?></div></td>
            <td><label>e-mail </label></td>
            <td><div> <?php echo form_input($email2); ?></div></td>
            <td><label>e-mail </label></td>
            <td><div> <?php echo form_input($email3); ?></div></td>
        </tr>
        <tr>
             <td><label>e-mail </label></td>
            <td><div> <?php echo form_input($gsmnummer); ?></div></td>
            <td><label> gsm-nummer </label></td>
            <td><div> <?php echo form_input ($gsmnummer2); ?> </div></td>
            <td><label> gsm-nummer </label></td>
            <td><div> <?php echo form_input ($gsmnummer3); ?> </div></td>
        </tr>
        <tr>
            <td><label>zitplaats</label></td>
            <td><div> <?php echo form_label($label_text='aangevinkte plaats'); ?> </div></td>
            <td><label>zitplaats</label></td>
            <td><div> <?php echo form_label($label_text='aangevinkte plaats'); ?> </div></td>
            <td><label>zitplaats</label></td>
            <td><div> <?php echo form_label($label_text='aangevinkte plaats'); ?> </div></td>
        </tr>
        <tr>
            <td> <?php echo form_submit(array('name'=> 'verzend'), 'verzend'); ?> </td>
        </tr>
    </table>

     <?php echo form_close(); ?>
    <table>
  <tr>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z01" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z02" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z03" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z04" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z05" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z06" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z07" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="11" scope="col">&nbsp;</th>
        <th width="26" scope="col">&nbsp; <input type="checkbox" name="check" value="Z08" align="center" onchange="javascript:process()"/> </th>
        <th width="20" scope="col">&nbsp; <input type="checkbox" name="check" value="Z09" align="center" onchange="javascript:process()"/></th>
 </tr>
 <tr>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z10" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z11" align="center"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z12" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z13" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z14" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z15" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z16" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="26" scope="col">&nbsp; <input type="checkbox" name="check" value="Z17" align="center" onchange="javascript:process()"/> </th>
        <th width="20" scope="col">&nbsp; <input type="checkbox" name="check" value="Z18" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z19" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z20" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z21" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z22" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z23" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z24" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z25" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="26" scope="col">&nbsp; <input type="checkbox" name="check" value="Z26" align="center" onchange="javascript:process()"/> </th>
        <th width="20" scope="col">&nbsp; <input type="checkbox" name="check" value="Z27" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
         <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z28" align="center" onchange="javascript:process()"/> </th>
         <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z29" align="center" onchange="javascript:process()"/></th>
         <th width="6" scope="col">&nbsp; </th>
         <th width="6" scope="col">&nbsp;</th>
         <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z30" align="center" onchange="javascript:process()"/> </th>
         <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z31" align="center" onchange="javascript:process()"/></th>
         <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z32" align="center" onchange="javascript:process()"/></th>
         <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z33" align="center" onchange="javascript:process()"/></th>
         <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z34" align="center" onchange="javascript:process()"/></th>
         <th width="6" scope="col">&nbsp; </th>
         <th width="6" scope="col">&nbsp;</th>
         <th width="26" scope="col">&nbsp; <input type="checkbox" name="check" value="Z35" align="center" onchange="javascript:process()"/> </th>
         <th width="20" scope="col">&nbsp; <input type="checkbox" name="check" value="Z36" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z37" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z38" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z39" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z40" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z41" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z42" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z43" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="26" scope="col">&nbsp; <input type="checkbox" name="check" value="Z44" align="center" onchange="javascript:process()"/> </th>
        <th width="20" scope="col">&nbsp; <input type="checkbox" name="check" value="Z45" align="center" onchange="javascript:process()"/></th>
</tr>
<tr>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z46" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z47" align="center" onchange="javascript:process()"/></th>
        <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z48" align="center" onchange="javascript:process()"/> </th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z49" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z50" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z51" align="center" onchange="javascript:process()"/></th>
        <th width="23" scope="col">&nbsp; <input type="checkbox" name="check" value="Z52" align="center" onchange="javascript:process()"/></th>
         <th width="6" scope="col">&nbsp; </th>
        <th width="6" scope="col">&nbsp;</th>
        <th width="26" scope="col">&nbsp; <input type="checkbox" name="check" value="Z53" align="center" onchange="javascript:process()"/> </th>
        <th width="20" scope="col">&nbsp; <input type="checkbox" name="check" value="Z54" align="center" onchange="javascript:process()"/></th>
  </tr>
</table>
</body>

Upvotes: 0

Views: 304

Answers (1)

lsuarez
lsuarez

Reputation: 4992

This code will do what you want but you're going to face some problems:

$(function () {
    $("input:checkbox").change(function () {
        if ($(this).is(":checked")) {
            // Disable all checkboxes; TODO: Give the checkboxes a clearer selection scope
            $("input:checkbox").attr("disabled", true);

            // Leave this checkbox enabled
            $(this).removeAttr("disabled");

            // Set label; TODO: Give this label clearer selection scope
            $("label:contains('zitplaats')").html($(this).val());
        } else {
            // Enable all checkboxes; TODO: Give the checkboxes a clearer selection scope
            $("input:checkbox").removeAttr("disabled");

            // Reset label; TODO: Give this label clearer selection scope
            $("label:contains('" + $(this).val() + "')").html("zitplaats");
        }
    });
});

Pay attention to the TODO items. Label your table full of checkboxes with an ID so you can change the $("input:checkbox") selector to something like $("#tableID input:checkbox") to restrict it only to checkboxes in the table you want to affect. Give the <label> that needs its contents changed an ID or unique psuedo-class so that you can update $("label:contains('zitplaats')") and $("label:contains('" + $(this).val() + "')") with something that can actually be selected reliably like $("#labelID")

Upvotes: 1

Related Questions