Question

嗨我有一些问题，当我尝试用javascript函数制作一些PHP 我要做的是一个文本框，根据左侧的复选框启用/禁用

这是我的代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <script type="text/javascript">
        function enable_txtbox(id){
            if(document.getElementById(id).disabled){
                document.getElementById(id).disabled=false;
                var x = document.getElementById(id).disabled;
                document.getElementById("demo").innerHTML=x;
            }
            else
                document.getElementById(id).disabled=true;
        }
    </script>
</head>
<body>
    <form method="get">
    <table>
        <tbody>
            <tr>
                <td>Nama Gejala</td>
                <td>:</td>
                <td><input type="text" name="nama"></td>
            </tr>
            <tr>
                <td>Jenis Gejala</td>
                <td>:</td>
                <td><select name="jenis">
                        <option value="0">Umum</option>
                        <option value="1">Khusus</option>
                    </select></td>
            </tr>
        </tbody>
    </table>
        <table>
            <thead>
                <tr>
                    <td>Penyakit yang Berhubungan</td>
                    <td>:</td>
                </tr>  
            </thead>
            <tbody>
                <?php 
                    $id=1;
                    while($row = mysqli_fetch_array($result)){
                        $id=$row['id'];
                        echo "<tr>";
                        echo "<td><input type='checkbox' name='chk$id' value='$id' onclick='enable_txtbox('".$id."')'>".$row['nama']."<br></td>";
                        echo "<td>Nilai Kepastian</td>";
                        echo"<td>:</td>";
                        echo "<td><input type='text' name='cf".$id." id='$id' disabled='disabled'></td>";
                        echo "</tr>";
                    }
                    mysqli_close($con);
                ?>
            </tbody>
        </table>
        <table>
            <tbody>
                <tr>
                    <p id="demo"></p>
                    <td><input type="submit"></td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

PS：我有多个复选框和文本框，具体取决于我的数据库文件

之前感谢并原谅我的英语技巧：）

Answer 1

我希望这能解决你的问题。

脚本...

    function enable_txtbox(id){
        if(document.getElementById(id).disabled){
            document.getElementById(id).disabled=false;
            var x = document.getElementById(id).disabled;
            document.getElementById("demo").innerHTML=x;
        } else {                
            document.getElementById(id).disabled=true;
            var x = document.getElementById(id).disabled;
            document.getElementById("demo").innerHTML=x;
        }
    }

... HTML

    <table>
        <tbody>
            <tr>
                <td>Nama Gejala</td>
                <td>:</td>
                <td><input type="text" name="nama"/></td>
            </tr>
            <tr>
                <td>Jenis Gejala</td>
                <td>:</td>
                <td><select name="jenis">
                        <option value="0">Umum</option>
                        <option value="1">Khusus</option>
                    </select></td>
            </tr>
        </tbody>
    </table>
    <table>
        <thead>
            <tr>
                <td>Penyakit yang Berhubungan</td>
                <td>:</td>
            </tr>   
        </thead>
        <tbody>

            <tr>
                <td>check1</td>
                <td><input type="checkbox" onclick="enable_txtbox('first')" /></td>
            </tr> 
            <tr>
                <td>Txt1</td>
                <td><textarea id="first"> </textarea></td>
            </tr>

            <tr>
                <td>check2</td>
                <td><input type="checkbox" onclick="enable_txtbox('second')" /></td>
            </tr> 
            <tr>
                <td>Txt2</td>
                <td><textarea id="second"> </textarea></td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <p id="demo"></p>
                <td><input type="submit"/></td>
            </tr>
        </tbody>
    </table>

JSPIDDLE

Answer 2

您应该使用jQuery来检查是否选中了复选框。假设您有一个id =＆＃39; idTag＆＃39;的复选框，我们想检查是否选中了复选框。

$('#idTag').is(":checked")

如果选中复选框，则返回true;从那一刻起，你可以使用jQuery来显示隐藏的内容，或者将它附加到div。说文本输入框有id＆＃39; textId＆＃39;。

方法一：

if($('#idTag').is(":checked"))
    $("#textId").css("display", "block"); //if you just like to show the block.

if($('#idTag').is(":checked"))
    $("#textId").fadeIn("slow"); //Gives it a nice effect as well.

方法二：

<div id='DIV'>
   <input type='checkbox' id='idTag' value='checkbox'/>
</div>
<script>
   if($('#idTag').is(":checked"))
       $("#DIV").append("<input type='text' placeholder='textbox' />");
</script>

Answer 3

您可以简化您的功能

DEMO http://jsfiddle.net/x8dSP/2853/

<script>
    function enable_txtbox(id){
    if(document.getElementById(id).disabled == true){
        document.getElementById(id).disabled = false;
    } else {
        document.getElementById(id).disabled = true;
    }
    return true;
}
</script>

启用/禁用文本框取决于复选框 - javascript

3 个答案: