如果其中一個輸入填充，禁用表格行中的輸入

Question

我有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> 

如何讓它爲每行分開工作？

Answer 1

使用相同class每個input，創建這些input事件前後檢查輸入的value如果她不爲空disable所有其他的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>

Answer 2

可以使用 'jQuery的（本）.VAL（）' 而不是 'jQuery的（ 「inputA」）。VAL（）' 或' jQuery（「。inputB」）。val（）'或jQuery（「。inputC」）。val（）

Answer 3

解決了您的問題！禁用與當前編輯的類不同的所有輸入字段。

演示：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); 
     } 
    }); 
});