如何解决启用/禁用单选按钮下拉菜单选择
我有一个模态弹出窗口,它在点击数据表中每一行的按钮时打开。在模式窗口上,我有 4 个下拉列表,其中我希望为每一行数据禁用一个下拉列表。当用户将单选按钮值选择为“是”时,它应该被启用。
这是我的脚本:
$(document).ready(function(){
$('.action').attr('disabled','disabled');
var $checkBox = $('.check');
$checkBox.on('change',function(e) {
//get the prevIoUs element to us,which is the select
var $select = $(this).prev();
if (this.checked) {
$select.removeAttr('disabled');
} else {
$select.attr('disabled','disabled');
}
});
});
这是我的 html:
<div class="form-group">
<label>Action Taken:</label>
<input type="radio" class="check" id="check" name="check" value="Yes">Yes
<input type="radio" class="check" id="check" name="check" value="Yes">No
<select name="action" id="action" class="form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
如果我在 select 标签后添加单选按钮,它在一行中工作,但是在我选择第二行数据时提交后它停止工作,那么我必须再次刷新页面,但我想要在 select 标签之前选择单选按钮它也应该适用于每一行。有人可以帮我解决我在这里做错了什么
解决方法
首先,您的单选按钮需要 2 个不同的值,两个按钮都有 Yes
<input type="radio" class="check" name="check" value="Yes">Yes
<input type="radio" class="check" name="check" value="No">No
您可以将单选按钮和选择放在父 div 中,然后使用该父级访问选择框,而不是使用 next
,prev
... 像 <div class="form-group">
>
$('.check').change(function(){
let select = $(this).parents('.form-group:first').find('select') ;
if( $(this).val() == 'Yes')
select.attr('disabled',false );
else
select.attr('disabled',true );
})
https://jsfiddle.net/ns5g3rqe/
,这里有几个问题,每个问题都需要更正才能使您的代码正常工作:
- “否”复选框的值为“是”。这需要更改,以便您的 JS 确定哪个框已被选中。
-
.action
是一个类选择器,但选择具有id
。由于您的问题表明此 HTML 可能有多个克隆,请删除id
上的select
并改用class
-
select
不是任一收音机的prev()
元素。通过从那里检索closest()
公共父级和find()
来解决此问题。 - 您在单选按钮上重复了相同的
id
和#check
,但它们必须是唯一的。更改或删除它们。
更正后,代码有效:
jQuery($ => {
$('.action').prop('disabled',true);
let $checkBox = $('.check').on('change',e => {
var $select = $(e.target).closest('.form-group').find('.action');
$select.prop('disabled',e.target.value !== 'Yes' && e.target.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Action Taken:</label>
<label>
<input type="radio" class="check" name="check" value="Yes" />
Yes
</label>
<label>
<input type="radio" class="check" name="check" value="No" checked />
No
</label>
<select name="action" class="action form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group">
<label>Action Taken:</label>
<label>
<input type="radio" class="check" name="check" value="Yes" />
Yes
</label>
<label>
<input type="radio" class="check" name="check" value="No" checked />
No
</label>
<select name="action" class="action form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。