如果其中一个输入已填充，则禁用表行中的输入。
如果其中一个输入已填充，则禁用表行中的输入。
提问于 2016-10-14 07:18:40
我有javascript代码来禁用其他输入，如果一个被填充。我要把它放在数据库里的桌子上。可悲的是，它只适用于第一表行，并禁用表中的所有输入(但如果输入填充不是优先，什么都不会发生)。
Javascript：
$(function(){
$("input").on("keyup", function(){
if($(this).hasClass("inputA") && $(".inputA").val()){
$("input.inputB").prop("disabled", true);
$("input.inputA").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputB") && $(".inputB").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputC") && $(".inputC").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", true);
$("input.inputC").prop("disabled", false);
} else {
$(".inputA, .inputB").prop("disabled", false);
}
});
});我在html表中的td：
<td><input type="text" class="inputA" value=""></td>
<td><input type="text" class="inputB" value=""></td>
<td><input type="text" class="inputC" value=""></td>如何使每一行分开工作？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-10-14 07:26:11
在每个class上使用相同的input，在这些input上创建事件之后，检查输入的value，如果她不是空的，那么所有其他的input都在一行中工作，只需选择parent的所有输入。
尽量避免多次测试，就像你做的那样。不可移动和可维护。
示例
$(".input").on("keypress change keyup",function(){
if($(this).val() != "")
{
$(this).parent().parent().find(".input").not($(this)).prop("disabled",true);
}
else
{
$(this).parent().parent().find(".input").prop("disabled",false);
}
});.input:disabled{
background-color:LightBlue;
border:solid 1px blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
</table>
Stack Overflow用户
发布于 2016-10-14 07:44:27
这解决了你的问题！禁用与当前编辑的输入字段没有相同类的所有输入字段。
演示：https://jsfiddle.net/3tf8ou3y/1/
jQuery(document).ready(function($) {
$("tr").on("keyup", "input", function(event) {
// get the current row
var $row = $(event.delegateTarget);
// get the class of the input field being edited
var this_class = $(this).attr('class');
if ($(this).val().length > 0) {
// if the input field has a value, disable all
// other input fields in the sam row
$('input:not(.'+this_class+')', $row).prop('disabled', true);
} else {
// else enable all input fields
$('input', $row).prop('disabled', false);
}
});
});Stack Overflow用户
发布于 2016-10-14 07:32:50
您可以使用'jQuery(this).val()‘代替’jQuery(“.inputA”).val()或‘jQuery(“.inputB”).val()或jQuery(".inputC").val()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40037197
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号