禁用“基于同一行上的另一个元素进行选择”
Disable Select based on another element on the Same Row
在一个表中,我有一行有两个输入——一个选择,一个文本。我想要实现的是,如果其中一个有值,那么另一个(在同一行)应该禁用。当文本框中有值时,onload
可以正常工作,但当只有选择框中有一个值时,这似乎不起作用。
正如您在这里的示例中看到的:http://jsfiddle.net/anAgent/UBUhn/1/";改变";事件工作正常,但onload
不工作。
如有任何帮助,我们将不胜感激!
我使用的是jQuery 1.5.2以及Google Chrome和IE9
使用最终代码更新
感谢@soopseven和@eito的意见。基于这两个答案,这里是最后的代码。我希望它能帮助其他人。
$(document).ready(function() {
$(".validation-compare").change(runRowValidation);
$(".validation-compare").each(runRowValidation);
});
function runRowValidation() {
var $me = $(this),
$other = $('.validation-compare',$me.closest("tr")).not($me),
mVal = $me.val(),
oVal =$other.val();
if(mVal != "" && oVal == "") {
$me.removeAttr('disabled');
$other.attr('disabled',1);
} else if(mVal == "" && oVal != "") {
$other.removeAttr('disabled');
$me.attr('disabled',1);
} else {
$other.removeAttr('disabled');
$me.removeAttr('disabled');
}
}
您可以在以下位置看到它的作用:http://jsfiddle.net/anAgent/UBUhn/24/
我认为您不需要设置类valid
,您所要做的就是替换
var $otherInput = $('.validation-compare', $parent).not('.valid');
通过
var $otherInput = $('.validation-compare', $parent).not($me);
这将解决加载时的问题。以下是
var validme=function() {
var me=$(this);
me.removeClass('validation-compare');
if (me.val()) {
console.log(me);
me.addClass('valid');
me.parent().parent().find('.validation-compare').attr('disabled',1);
me.addClass('validation-compare');
return;
}
me.removeClass('valid');
if (me.parent().parent().find('.validation-compare.valid').length<1) {
me.parent().parent().find('.validation-compare').removeAttr('disabled'); }
me.addClass('validation-compare');
}
$('.validation-compare').each(validme);
$('.validation-compare').change(validme)
http://jsfiddle.net/UBUhn/22/
您需要分离函数,并在点击事件和页面加载时调用它。类似这样的东西:
jQuery(function($){
function myFunction() {
// do somestuff
}
// myFunction needs to be called when select is clicked and when page is loaded
$('#someelement').click(myFunction);
$(document).ready(myFunction);
});
相关文章:
- 处理表行的当前子级,而不是名称或类的所有元素
- 如何使用javascript函数在gridview中按行启用/禁用复选框
- 在具有命名作用域的自定义Polymer元素中隐藏表行
- 如何使用JS禁用表行,并在MYSQL中插入所选选项
- 将表行动态添加到表或tbody元素中
- Firefox:点击并更改未附加到文档树中的复选框元素上的事件
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- 在参考行中显示多选选项
- 如何使用jQuery从DOM中删除所有单选按钮元素
- ui网格如何在单击行时选中复选框
- 角度多选下拉框给出错误元素.多选不是一个函数
- 将动态元素/行添加到 Angularjs 中的多维 Json 数组中
- PHP 简单 HTML DOM 和下拉元素已选选项
- 选中切换元素复选框
- 检查元素在jquery的3个元素行中是第一个还是第三个
- 隐藏显示元素复选框
- 从选中复选框的父行获取元素
- 无序列表中的前两个元素行内对齐,其余元素每行对齐
- 如何在JQuery中单击最近的元素(复选框)时禁用下一个元素(文本区域)
- 当前列表可折叠,父元素可选