需求
<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>
分享到：
相关推荐
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下
//为Select添加事件，当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text 3. var checkValue=$(“#select_id”).val(); //获取Select选择的Value...
jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循...
hidden的特殊性，因为hidden要手动触发change事件，当值改变的时候要 手动代码 .change() 触发一下才会保存相应的草稿 要实现以上功能只需要 初始化下插件 var fas=new formAutoSave(1001,"fas"); 参数1：用户唯一...
注意，同步请求可能会暂时的锁定浏览器, 当请求激活时不能进行任何操作。 beforeSend 数据类型: Function 一个预处理函数用于在发送前修改XMLHttpRequest对象，设置自定义头部等。 XMLHttpRequest作为惟一的...
//为Select添加事件，当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text 3. var checkValue=$(“#select_id”).val(); //获取Select选择的...
需要注意的是，这里的代码好多是针对jquery 1.32以前的版本（以后的版本已经不支持@）,所以替换为空测试下即可。jQuery获取Select选择的Text和Value: 语法解释： 1. $(“#select_id”).change(function(){//code…})...
//为Select添加事件，当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text 3. var checkValue=$(“#select_id”).val(); //获取Select选择的Value...