Disable input in table row if one of input filled

Question

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?

Alexis · Accepted Answer · 2016-10-14 07:42:38Z

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>

edited Oct 14, 2016 at 7:42

answered Oct 14, 2016 at 7:26

Alexis

5,8211 gold badge30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ingus Over a year ago

This is good example but this disable all other inputs in table not just in current line

Ingus Over a year ago

Any idea how to make disabled inputs change color?

Ingus Over a year ago

Thanks !I would probably use javascript and would mess your code :D

Ingus Over a year ago

any idea how to make it disable number 1 and number 2 inputs when using 2 or four ?struggling whit this last few hours :(

twominds · Accepted Answer · 2016-10-14 07:44:27Z

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

rohit180 · Accepted Answer · 2016-10-14 07:32:50Z

0

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

answered Oct 14, 2016 at 7:32

rohit180

161 bronze badge

Collectives™ on Stack Overflow

Disable input in table row if one of input filled

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related