需求
<input type="radio" id="need" name="need" value="0" />启用 <input type="radio" id="need" name="need" value="1" />禁用 <br /> <input type="text" value="hello"/> <input type="button" value="ok"/>?
我想让radio来控制下面的两个控件的启用与禁用
(不要说用checkbox,我是必须为了掩饰radio的功能)?
尝试
使用 change 事件似乎是可以的。
jquery的文档中(http://api.jquery.com/change/ )说,change事件在元素的值发生改变时触发。
The?
change
?event is sent to an element when its value changes. This event is limited to
<input>
?elements,?
<textarea>
?boxes and?
<select>
?elements.
For select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse, but for the
other element types the event is deferred until the element loses focus.
但是change事件对radio并不凑效。StackOverflow上也有相关讨论:
http://stackoverflow.com/questions/5831615/jquery-mobile-radio-group-change
http://stackoverflow.com/questions/964961/jquery-radio-onchange-toggle-class-of-parent-element
你可以很容易的测试一下
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <input type="radio" id="need" name="need" value="0" />启用 <input type="radio" id="need" name="need" value="1" />禁用 <br /> <input type="text" value="hello"/> <input type="button" value="ok"/> <div id="log"></div> <script type="text/javascript"> $(document).ready(function () { $("#need").change(function () { $("#log").append($("<p/>").text("fired")); }); }); </script> </body> </html>?
?只有前一个radio选择时才触发change事件,非常奇怪。
分析
错误非常弱智,因为我是使用的 id 作为筛选器!重复id只能选中第一个!坑爹啊有木有!
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="needradio"> <input type="radio" id="need" name="need" value="1" />启用 <input type="radio" id="need" name="need" value="0" />禁用 </div> <input type="text" value="hello"/> <input type="button" value="ok"/> <div id="log"></div> <script type="text/javascript"> $(document).ready(function () { $("#needradio :radio").change(function () { $("#log").append($("<p/>").text("fired")); setEnable($(this).val()=="1"); }); }); function setEnable(b) { var ips = $("input").not(":radio").add("textarea"); if (b) ips.removeAttr("disabled"); else ips.attr("disabled", true); } </script> </body> </html>?
?