需求
<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事件需要了解的朋友可以参考下
jQuery提供了丰富的事件处理函数，如`.click()`, `.change()`, `.focus()`等，可以监听用户对radio和checkbox的操作。例如，当用户点击一个radio按钮时，可以触发一个事件来更新其他同组radio的样式，确保只有一个被...
4. **触发事件**：jQuery允许我们监听用户的交互，比如当checkbox或radio的状态改变时。使用`.change()`方法可以添加事件监听器。例如，`$("#myCheckbox").change(function() { ... })`会在checkbox状态改变时执行回...
jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循...
可能还会有`.change()`事件监听器，当单选框或复选框的状态改变时触发一些自定义行为。 `images`文件夹可能包含了一些图标或者背景图片，用于替换默认的单选框和复选框样式。在CSS中，可以使用`background-image`...
这里的`type="checkbox"`定义了这是一个复选框，`id`属性用于与`<label>`的`for`属性对应，以便点击文字也能触发复选框的选中状态。 接下来，我们可以通过CSS来美化这个复选框。一种常见的方法是使用伪元素（`:...
本项目专注于“jQuery自定义check、radio样式”，旨在改善网页中的复选框（checkbox）和单选按钮（radio）的默认外观，提供更美观、更符合现代网页设计感的样式，并且兼顾对旧版本IE浏览器（如IE6）的兼容性。...
"jquery表单Check样式"是指利用jQuery来实现表单元素，如复选框（checkbox）和单选按钮（radio）的样式控制，以提升用户体验和界面美观度。 在HTML表单中，传统的复选框和单选按钮的样式由浏览器默认提供，样式单一...
3. `change()`：触发或绑定内容改变事件。 4. `dblclick()`：触发或绑定双击事件。 5. `delegate()`：向匹配元素的后代元素附加事件处理器（已废弃，可使用 `on()` 替代）。 6. `on()`：用于事件绑定，可以绑定到...
- 对于select元素，由于select控件不触发focus事件，因此更适合使用change事件来执行验证。 最后，文章通过示例代码展示了如何进行范围验证。具体到源码解析部分，可以看到使用jQuery的$.fn.extend方法扩展了...
为了进一步增强用户体验，我们可能还会引入JavaScript（如jQuery）来处理事件监听和动态行为。例如，我们可以监听`change`事件，当用户点击checkbox或radio时执行某些函数： ```javascript $('input[type="checkbox...
2. **添加事件监听器**：接着，为checkbox添加一个change事件监听器，当checkbox的状态改变时触发。使用`.on('change', function() { ... })`来实现。 3. **检查状态**：在事件处理函数中，获取当前checkbox的状态...
$("input[type='checkbox'], input[type='radio']").on('change', function() { // 在这里可以添加重新选择后的逻辑处理 }); }); ``` 上述代码中，`$(document).ready()`函数确保在页面加载完成后执行其内的函数...
2. **单选按钮**（`<input type="radio">`）和**复选框**（`<input type="checkbox">`）：这些组件会被包装在`.ui-radio`或`.ui-checkbox`容器中，提供视觉反馈。 3. **下拉菜单**（`<select>`）：在移动设备上，...
在前端开发中，我们经常需要对HTML中的复选框（checkbox）和单选按钮（radio button）进行美化，以提高用户界面的视觉效果和交互体验。这个名为"checkbox单选复选按钮美化代码.zip"的压缩包文件包含了实现这一目标的...
除此之外，jQuery 还提供了其他如 `change()`, `keydown()`, `load()`, `resize()`, `scroll()` 等事件方法，使得处理用户交互变得简单直观。 总之，jQuery 以其简洁的 API 和强大的功能，极大地提升了 JavaScript ...
4. `change()`：触发或绑定`change`事件，常用于表单元素的值改变时。 5. `dblclick()`：触发或绑定`double click`事件，即双击事件。 6. `delegate()`：向元素的子元素附加事件处理器，适用于动态添加的元素。 7. `...