jquery radio/checkbox change 事件不能触发的问题

需求

<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>