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 disabl

Solution 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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td><inputtype="text"class="input"value=""></td><td><inputtype="text"class="input"value=""></td><td><inputtype="text"class="input"value=""></td></tr><tr><td><inputtype="text"class="input"value=""></td><td><inputtype="text"class="input"value=""></td><td><inputtype="text"class="input"value=""></td></tr></table>

Solution 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 rowvar $row = $(event.delegateTarget);
        // get the class of the input field being editedvar 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);
        }
    });
});

Solution 3:

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