javascriptでのテキストボックス制御
javascriptを使用して
特定のテキストボックスを動的に enable←→disableを切り替えたく、様々なホームページを見ながら試行錯誤して、下記ソースまで辿りつきましたが、うまく動かなくて困っています。
どうかご教示ください。よろしくお願いします。
現状:チェックをいれると enable→disableになるが、外すと戻らない。
目標:同上+チェック外すと最初disableも含めて、enableになる。
<html>
<head>
<script language="javascript" type="text/javascript">
function autochk(f){
for(var i=0;i<f.form.length;i++){
if (f.form.elements[i].className=="ko"){
if (f.form.elements[i].checked){ //checked チェックが入っていたら
f.form.elements[i].disabled = false; // 入力不可, 無効化
}else{
f.form.elements[i].disabled = true; // 入力可能,有効化
}
}
}
}
</script>
<style type="text/css">
<!--
ul li {
list-style: none;
}
label {
margin-right: 10px;
width:200px;
float: left;
}
-->
</style>
</head>
<body>
<form>
<ul>
<li><input type="checkbox" name="oya" value="1" onclick="autochk(this);">チェック</li>
<li><label>無効→チェック→無効→有効</label><input type="text" name="ko1" class="ko" value="1" disabled></li>
<li><label>有効→チェック→無効→有効</label><input type="text" name="ko2" class="ko" value="1"></li>
<li><label>有効→チェック→そのまま</label><input type="text" name="other1" value="1"></li>
<li><label>有効→チェック→無効→有効</label><input type="text" name="ko3" class="ko" value="1"></li>
<li><label>有効→チェック→無効→有効</label><input type="text" name="ko4" class="ko" value="1"></li>
<li><label>有効→チェック→そのまま</label><input type="text" name="other2" value="1"></li>
</form>
</ul>
</body>
</html>