Disable input in table row if one of input filled

问题:

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:

  $(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);

                    }
    });
});

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?

回答1:

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.

Example

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

回答2:

This solves your issue! Disable all input fields that doesn't have same class as the one being currently edited.

Demo: 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);
        }
    });
});

回答3:

You can use 'jQuery(this).val()' instead of 'jQuery(".inputA").val()' or 'jQuery(".inputB").val()' or jQuery(".inputC").val()