如果输入之一已填写，请禁用表行中的输入 [英] Disable input in table row if one of input filled

问题描述

如果有一个输入，我有JavaScript代码来禁用其他输入. 我需要它从数据库中出来的表中. 可悲的是，它仅适用于表的第一行，并禁用表中的所有输入(但如果输入不是首先填充，则什么也不会发生)

I have javascript code to disable other inputs if one is filled . I need it in table that comes out of database. The sad thing is that it only works with first table row and disable all inputs in table (but if input filled is not first nothing happens)

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:

My td from html table:

<td><input type="text" class="inputA" value=""></td>
<td><input type="text" class="inputB" value=""></td>
<td><input type="text" class="inputC" value=""></td>

如何使它适用于分隔的每一行?

How to make it work for each line separated?

推荐答案

在每个input上使用相同的class，在这些input上创建事件，然后检查输入的value(如果她不为空) disable其他所有input都可以在一行中工作，只需选择parent的所有输入即可.

Use the same class on each input, create event on those input after that check the value of the input if she's not empty disable all of others input for this works in a line just select all input of the parent.

尝试避免像以前那样进行多次测试.不易维护.

Try to avoid multiple test as you did. Not lisible and maintainable.

示例

$(".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>

这篇关于如果输入之一已填写，请禁用表行中的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！