enable / disable textbox depending on checkbox - javascript
Question
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
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
thanks before and forgive me for my bad english skill :)
3 answers
solution1
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....
<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>
solution2
0 2014-03-24 17:53:09
You should use jQuery to check whether the checkbox is checked. Say you have a checkbox with id='idTag', and we would like to check whether the checkbox is checked or not.
$('#idTag').is(":checked")
This returns true should the Checkbox be checked; from that moment on you could use jQuery to either show the were it hidden, or append it to the div. say the text input box has 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>
solution3
0 2014-03-24 17:55:47
You could simplify your function
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.