jquery中如何实现当type为text的input当中的任何一个值为空并且type为radio的input没有被选择时,不可以点击button,除非所有type为text的input都有值并且type为radio的任何一个input被勾选时,才可以点击button
时间: 2024-01-22 20:18:56 浏览: 115
可以使用jQuery的事件绑定函数和表单元素的属性和方法来实现这个功能。具体实现方式如下:
HTML代码:
```html
<input type="text" id="text1">
<input type="text" id="text2">
<input type="radio" name="radio" id="radio1">
<input type="radio" name="radio" id="radio2">
<button id="submit">提交</button>
```
jQuery代码:
```javascript
$(function() {
// 监听input和radio的变化事件
$('input[type="text"], input[type="radio"]').on('change', function() {
// 判断所有type为text的input是否都有值
var allTextFilled = $('input[type="text"]').filter(function() {
return this.value.trim() === '';
}).length === 0;
// 判断type为radio的任何一个input是否被勾选
var radioChecked = $('input[type="radio"]').is(':checked');
// 如果上述条件都满足,则启用按钮,否则禁用按钮
$('#submit').prop('disabled', !(allTextFilled && radioChecked));
});
});
```
代码说明:
1. 使用jQuery的`$(function() {...})`语法来等待页面DOM加载完成后执行代码。
2. 使用jQuery的事件绑定函数`$('input[type="text"], input[type="radio"]').on('change', function() {...})`来监听type为text和radio的input元素的变化事件。
3. 在变化事件处理函数中,使用jQuery选择器和过滤函数来获取所有type为text的input元素,判断它们是否都有值(即去除首尾空格后是否为空字符串)。如果所有type为text的input都有值,则返回的过滤结果数组长度为0,否则长度大于0。
4. 使用jQuery选择器和is函数来判断type为radio的任何一个input是否被勾选。
5. 使用jQuery属性操作函数`$('#submit').prop('disabled', !(allTextFilled && radioChecked));`来设置按钮的disabled属性,使其根据上述条件启用或禁用。
阅读全文