如果选中/取消选中特定复选框,如何正确启用/禁用输入框?

时间:2014-01-12 07:33:44

标签: javascript php html checkbox

它在我单独的php文件中的工作方式不起作用,我首先在代码上进行了实验。 我正在尝试在选中/取消选中特定复选框时启用/禁用输入框。 这些是我的代码。请帮我。它假设工作正常吗?它已经在我的单独文件上工作了。但是当我将它应用于我的实际编码文件时却没有。

我无法弄清楚出了什么问题。 :(

html with php(checboxes code)

echo '<table style="border-radius:6px;border-color: FFFFFF;width:700; text-align:center" border="1" cellspacing="0" cellpadding="3">

<tr><th style="font:11pt/15pt Helvetica, sans-serif; color: #FFFFFF; ">
**<input type="checkbox" name="mon" id="mon" value="Monday" onclick="javascript:Mon_Select()"/>** Monday</th>

<th style="font:11pt/15pt Helvetica, sans-serif; color: #FFFFFF; ">
**<input type="checkbox" name="tues" id="tues" value="Tuesday" onclick="javascript:Tues_Select()">** Tuesday</th>

<th style="font:11pt/15pt Helvetica, sans-serif; color: #FFFFFF; ">
**<input type="checkbox" name="wed" id="wed" value="Wednesday" onclick="javascript:Wed_Select()">** Wednesday</th>

<th style="font:11pt/15pt Helvetica, sans-serif; color: #FFFFFF; ">
**<input type="checkbox" name="thurs" id="thurs" value="Thursday" onclick="javascript:Thurs_Select()">** Thursday</th>

<th style="font:11pt/15pt Helvetica, sans-serif; color: #FFFFFF; ">
**<input type="checkbox" name="fri" id="fri" value="Friday" onclick="javascript:Fri_Select()">** Friday</th>

<th style="font:11pt/15pt Helvetica, sans-serif; color: #FFFFFF; ">
**<input type="checkbox" name="sat" id="sat" value="Saturday" onclick="javascript:Sat_Select()">** Saturday</th>
</tr>

这些是我要启用/禁用的输入框         

         <td>
         <label for id="Start_Mon" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Start Time: <br>
         <input type="time" style="width:100; height:20" name="Start_Mon" id="Start_Mon" disabled/></label>
         </td>
         <td>
         <label for id="Start_Tues" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Start Time: <br>
         <input type="time" style="width:100; height:20" name="Start_Tues" id="Start_Tues" disabled/></label>
         </td><td>
         <label for id="Start_Wed" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Start Time: <br>
         <input type="time" style="width:100; height:20" name="Start_Wed" id="Start_Wed" disabled/></label>
         </td>
         <td>
         <label for id="Start_Thurs" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Start Time: <br>
         <input type="time" style="width:100; height:20" name="Start_Thurs" id="Start_Thurs" disabled/></label>
         </td>
         <td>
         <label for id="Start_Fri" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Start Time: <br>
         <input type="time" style="width:100; height:20" name="Start_Fri" id="Start_Fri" disabled/></label>
         </td>
         <td>
         <label for id="Start_Sat" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Start Time: <br>
         <input type="time" style="width:100; height:20" name="Start_Sat" id="Start_Sat" disabled/></label>
         </td>

    </tr>

    <tr>

         <td>
         <label for id="End_Mon" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">End Time: <br>
         <input type="time" style="width:100; height:20" name="End_Mon" id="End_Mon" disabled/></label>
         </td>
         <td>
         <label for id="End_Tues" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">End Time: <br>
         <input type="time" style="width:100; height:20" name="End_Tues" id="End_Tues" disabled/></label>
         </td><td>
         <label for id="End_Wed" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">End Time: <br>
         <input type="time" style="width:100; height:20" name="End_Wed" id="End_Wed" disabled/></label>
         </td>
         <td>
         <label for id="End_Thurs" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">End Time: <br>
         <input type="time" style="width:100; height:20" name="End_Thurs" id="End_Thurs" disabled/></label>
         </td>
         <td>
         <label for id="End_Fri" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">End Time: <br>
         <input type="time" style="width:100; height:20" name="End_Fri" id="End_Fri" disabled/></label>
         </td>
         <td>
         <label for id="End_Sat" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">End Time: <br>
         <input type="time" style="width:100; height:20" name="End_Sat" id="End_Sat" disabled/></label>
         </td>

    </tr>';



echo '      <tr>    ';  
    $a = mysql_query("SELECT * FROM rooms ORDER BY room_name ASC") 
                                or die(mysql_error());
echo '          <td>
        <Label for id="Room_Mon" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Room:<br>
        <select name="Room_Mon" id="Room_Mon"disabled/>';
        echo '<option value="0">--select--</option>';
        while($rname=mysql_fetch_array($a))
        {

            echo '<option value='.$rname['room_name'].'> '.$rname['room_name'].'</option>';

        }           

        echo '</select></label></td>';

    $a = mysql_query("SELECT * FROM rooms ORDER BY room_name ASC") 
                                or die(mysql_error());
echo '          <td>
        <Label for id="Room_Tues" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Room:<br>
        <select name="Room_Tues" id="Room_Tues" disabled/>';
        echo '<option value="0">--select--</option>';
        while($rname=mysql_fetch_array($a))
        {

            echo '<option value='.$rname['room_name'].'> '.$rname['room_name'].'</option>';

        }           

        echo '</select></label></td>';

    $a = mysql_query("SELECT * FROM rooms ORDER BY room_name ASC") 
                                or die(mysql_error());
echo '          <td>
        <Label for id="Room_Wed" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Room:<br>
        <select name="Room_Wed" id="Room_Wed" disabled/>';
        echo '<option value="0">--select--</option>';
        while($rname=mysql_fetch_array($a))
        {

            echo '<option value='.$rname['room_name'].'> '.$rname['room_name'].'</option>';

        }           

        echo '</select></label></td>';

    $a = mysql_query("SELECT * FROM rooms ORDER BY room_name ASC") 
                                or die(mysql_error());
echo '          <td>
        <Label for id="Room_Thurs" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Room:<br>
        <select name="Room_Thurs" id="Room_Thurs" disabled/>';
        echo '<option value="0">--select--</option>';
        while($rname=mysql_fetch_array($a))
        {

            echo '<option value='.$rname['room_name'].'> '.$rname['room_name'].'</option>';

        }           

        echo '</select></label></td>';

    $a = mysql_query("SELECT * FROM rooms ORDER BY room_name ASC") 
                                or die(mysql_error());
echo '          <td>
        <Label for id="Room_Fri" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Room:<br>
        <select name="Room_Fri" id="Room_Fri" disabled/>';
        echo '<option value="0">--select--</option>';
        while($rname=mysql_fetch_array($a))
        {

            echo '<option value='.$rname['room_name'].'> '.$rname['room_name'].'</option>';

        }           

        echo '</select></label></td>';

    $a = mysql_query("SELECT * FROM rooms ORDER BY room_name ASC") 
                                or die(mysql_error());
echo '          <td>
        <Label for id="Room_Sat" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Room:<br>
        <select name="Room_Sat" id="Room_Sat" disabled/>';
        echo '<option value="0">--select--</option>';
        while($rname=mysql_fetch_array($a))
        {

            echo '<option value='.$rname['room_name'].'> '.$rname['room_name'].'</option>';

        }           

        echo '</select></label></td>';



echo '      </tr>'; 
echo '</table>';


echo '<table style="border-radius:6px;border-color: FFFFFF;width:700; text-align:center" border="1" cellspacing="0" cellpadding="1">';

脚本

<script>

//checkboxes
function Mon_Select()
{
    if (document.getElementById('mon').checked)
        {
        document.getElementById('Start_Mon').disabled= false;
        document.getElementById('End_Mon').disabled= false;
        document.getElementById('Room_Mon').disabled= false;}
    else
        {
        document.getElementById('Start_Mon').disabled= true;
        document.getElementById('End_Mon').disabled= true;
        document.getElementById('Room_Mon').disabled= true;}
}   
 function Tues_Select()
{
    if (document.getElementById('tues').checked)
        {
        document.getElementById('Start_Tues').disabled= false;
        document.getElementById('End_Tues').disabled= false;
        document.getElementById('Room_Tues').disabled= false;}
    else
        {
        document.getElementById('Start_Tues').disabled= true;
        document.getElementById('End_Tues').disabled= true;
        document.getElementById('Room_Tues').disabled= true;}
}
 function Wed_Select()
{
    if (document.getElementById('wed').checked)
        {
        document.getElementById('Start_Wed').disabled= false;
        document.getElementById('End_Wed').disabled= false;
        document.getElementById('Room_Wed').disabled= false;}
    else
        {
        document.getElementById('Start_Wed').disabled= true;
        document.getElementById('End_Wed').disabled= true;
        document.getElementById('Room_Wed').disabled= true;}
}
 function Thurs_Select()
{
    if (document.getElementById('thurs').checked)
        {
        document.getElementById('Start_Thurs').disabled= false;
        document.getElementById('End_Thurs').disabled= false;
        document.getElementById('Room_Thurs').disabled= false;}
    else
        {
        document.getElementById('Start_Thurs').disabled= true;
        document.getElementById('End_Thurs').disabled= true;
        document.getElementById('Room_Thurs').disabled= true;}
}
 function Fri_Select()
{
    if (document.getElementById('fri').checked)
        {
        document.getElementById('Start_Fri').disabled= false;
        document.getElementById('End_Fri').disabled= false;
        document.getElementById('Room_Fri').disabled= false;}
    else
        {
        document.getElementById('Start_Fri').disabled= true;
        document.getElementById('End_Fri').disabled= true;
        document.getElementById('Room_Fri').disabled= true;}
}
 function Sat_Select()
{
    if (document.getElementById('sat').checked)
        {
        document.getElementById('Start_Sat').disabled= false;
        document.getElementById('End_Sat').disabled= false;
        document.getElementById('Room_Sat').disabled= false;}
    else
        {
        document.getElementById('Start_Sat').disabled= true;
        document.getElementById('End_Sat').disabled= true;
        document.getElementById('Room_Sat').disabled= true;}
}   



</script>

2 个答案:

答案 0 :(得分:1)

                         <td>
                         <label for id="Start_Mon" style="font:9pt/11pt Helvetica, sans-serif; color: #FFFFFF;">Start Time: <br>
                         <input type="time" style="width:100; height:20" name="Start_Mon" id="Start_Mon" disabled/></label>
                         </td>

你给了一个标签id ='Start_Mon' 你应该把它给它是

的输入元素
<input type="time" id='Start_Mon' style="width:100; height:20" name="Start_Mon" id="Start_Mon" disabled/></label>

在上面的代码中更改所有内容

需要将

id赋予输入字段而不是标签

没有更多的澄清请问!!!

答案 1 :(得分:0)

而不是在你的html:

onclick="javascript:Mon_Select()"

这样做:

onclick="Mon_Select()"

第一个是无效的js代码(仅适用于网址),第二个有效。

编辑此外,根据sanjeev的建议,从id删除<labels>个属性

希望这会有所帮助,欢呼