选中/取消选中特定复选框时如何正确启用/禁用输入框？ [关闭]答案

【问题标题】：How to properly enable/disable input boxes when a specific checkbox is checked/unchecked? [closed]选中/取消选中特定复选框时如何正确启用/禁用输入框？ [关闭]
【发布时间】：2014-01-25 11:56:52
【问题描述】：

它只是不像在我第一次尝试代码的单独 php 文件中那样工作。我正在尝试在选中/取消选中特定复选框时启用/禁用输入框。 这些是我的代码。请帮我。它应该工作对吗？它适用于我的单独文件。但是当我将它应用到我的实际编码文件时它不会。

我不知道出了什么问题。 :(

带有 php 的 html（复选框代码）

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>

【问题讨论】：

问我是否有什么让你困惑的地方。我的代码有点乱。但这很容易理解。
你能把它减少到有问题的最低限度吗？
也可能与您之前的问题重复材料：Assigning selected option html to a php variable without loading the page

标签： javascript php html checkbox

【解决方案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 需要给输入字段而不是标签

不要再问了！！！

【讨论】：

谢谢你，先生，我会试试的:)

【解决方案2】：

而不是在你的 html 中：

onclick="javascript:Mon_Select()"

这样做：

onclick="Mon_Select()"

第一个不是有效的 js 代码（仅在 url 中有效），第二个有效。

编辑另外，按照 sanjeev 的建议，从您的 <labels> 中删除您的 id 属性

希望对你有帮助，干杯

【讨论】：

好的，先生，但我已经尝试过了。第一个，在我的其他 php 文件上完美运行。我仍然会尝试你的建议:) 谢谢:)
谢谢先生 :) 我会这样做的:)
希望您能将我的回答标记为已接受；）
我刚刚做了 :) 哈哈，对不起，我刚来这里。谢谢它确实有效:)
欢迎您！很高兴它有帮助。干杯，来自玻利维亚拉巴斯