根据复选框启用/禁用文本框-javascript
[英]enable / disable textbox depending on checkbox - javascript
问题描述
hi i have some problem when i try to make some php with javascript function what i want to make is a textbox that will go enable / disable depending on checkbox on left side 
嗨，我有一些问题，当我尝试使用javascript函数制作一些PHP时，我要制作的是一个文本框，该文本框将根据左侧的复选框来启用/禁用
this is my code 这是我的代码
<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 : i have more than 1 checkboxes and textboxes depending on my database file PS：我有多个复选框和文本框，具体取决于我的数据库文件
thanks before and forgive me for my bad english skill :) 在此先感谢，请原谅我的英语水平很差:)
3 个解决方案
解决方案1
0 2014-03-24 17:52:26
I hope this solves your problem. 我希望这能解决您的问题。
Script... 脚本...
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.... 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>
解决方案2
0 2014-03-24 17:53:09
You should use jQuery to check whether the checkbox is checked. 您应该使用jQuery来检查该复选框是否已选中。 Say you have a checkbox with id='idTag', and we would like to check whether the checkbox is checked or not. 假设您有一个id ='idTag'的复选框，我们想检查一下该复选框是否被选中。
$('#idTag').is(":checked")
This returns true should the Checkbox be checked; 如果选中复选框，则返回true；否则，返回true。 from that moment on you could use jQuery to either show the were it hidden, or append it to the div. 从那时起，您可以使用jQuery来显示隐藏的内容，或将其附加到div。 say the text input box has id 'textId'. 假设文本输入框的ID为“ textId”。
Method one: 方法一：
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.
Method two: 方法二：
<div id='DIV'>
<input type='checkbox' id='idTag' value='checkbox'/>
</div>
<script>
if($('#idTag').is(":checked"))
$("#DIV").append("<input type='text' placeholder='textbox' />");
</script>
解决方案3
0 2014-03-24 17:55:47
You could simplify your function 您可以简化功能
DEMO http://jsfiddle.net/x8dSP/2853/ 演示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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.