日期:2014-05-16  浏览次数:20404 次

关于checkbox和label点击交互

<input type="checkbox" id="1" /><label for="1">其他说明<input type="text" disabled="disabled" /></label>


我想实现的是通过点击label的区域checkbox选中,文本框可填写。我是通过每次点击后checkbox的状态对文本框的disabled属性进行改写,点击事件我绑定在checkbox上(浏览器默认点击label触发checkbox点击事件)。但遇到的问题是,当此选项是选中的,但焦点不在文本框时,我点击文本框会触发checkbox上点击,又变为非选中状态了,这里我是不是要对浏览器默认行为进行阻止?但使用e.preventDefault无效(chrome下)。

求高手指教下,或者是不是我的实现思路不好,说个其他思路也好。
checkbox label js

------解决方案--------------------
是这效果?

 <input type="checkbox" id="1" onchange="this.form.t1.disabled=!this.checked;this.form.t1.focus()"  /><label for="1">其他说明</label> 
 <input type="text" disabled="disabled" id="t1" name="t1" />