javascript - 仅禁用不需要的输入 Javascript

Question

我有一段很酷的 Javascript 代码，它可以在输入被禁用时禁用行并更改颜色。

但我需要:
如果填充输入#1，则所有其他 3 个输入均被禁用，
如果填充输入#3，则禁用所有其他 3 个输入，
如果填充了输入 #2 和/或 #4，则输入 #1 和 #3 被禁用。
数据来自数据库。

Javascript:

$(".input").on("keypress change keyup",function(){
   if($(this).val() != "")
   {
     $(this).parent().parent().find(".input").not($(this)).prop("disabled",true).css("background-color","#cccccc");  
   }
   else
   {         $(this).parent().parent().find(".input").prop("disabled",false).css("background-color","#ffffff");
   }
});

这是表格代码:

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

_{^{这段代码是由 Alexis 编写的.}}

Answer 1

这是您寻找的代码...

HTML

为了避免隐藏输入等问题以及不知道每个元素的第 n 项的问题，请改用类:

<table>
  <tr>
    <td>
      <input type="hidden" class="input" value="">
    </td>
    <td>
      <input type="text" class="input toggle all" value="">
    </td>
    <td>
      <input type="text" class="input toggle every-other" value="">
    </td>
    <td>
      <input type="text" class="input toggle all" value="">
    </td>
    <td>
      <input type="text" class="input toggle every-other" value="">
    </td>
  </tr>
</table>

JQuery

$('body').on( 'keyup blur', '.input.toggle', function() {
    var $this = $( this );
    var $parent = $this.parent();
    var $disable = $parent.siblings().children();
    if ( $this.val() != "" )
    {
              if ( $this.is( '.all' ) )
                {
                      $disable = $parent.siblings().children( '.toggle' );
                }
              else if ( $this.is( '.every-other' ) )
                {
                      $disable = $parent.siblings().children( '.all' );
                }
              $disable.attr( 'disabled', true ).css("background-color","#ccc");
    }
    else
    {
        $disable.removeAttr('disabled').css("background-color","#fff");
    }
});

和here是它工作的一个例子。