jquery disable one input based on another

Question

I have two inputs where one is disabled and alt tag is removed if user adds anything into another input. This part works fine. But i also want to disable this same input if value is predefined in first input. Sometimes first input is empty and user has to fill it, sometimes it has predefined value, so another input should be disabled and alt tag removed.

Tnx

JSFiddle

$('.gsmhr').on('input', function() {
if ($(this).val().length)
$('.gsmslo1').prop('disabled', true).val('').removeAttr("alt");
else $('.gsmslo1').prop('disabled', false);
});

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
This works on user input<br>
<input type="text" name="" value="" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />
<br><br>
This should work if value is predefined<br>
<input type="text" name="" value="asdf" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />

I have a bunch of inputs in a large form, some of them need to be disabled if another fields has any value, but they are not next to each other, but are scattered all over form. Once user inputs all the fields and goes to next step, to review, he also has option to go back and change anything. The problem is, that those disabled fields are now enabled, even if control field has same value as user added it. Only when user changes anything in control field, that target field gets disabled again. — teva
– teva, Commented Mar 20, 2017 at 11:59

guradio · Accepted Answer · 2017-03-20 10:22:00Z

1

$('.gsmhr').on('input', function() {
  if ($(this).val().length)
    $(this).next('.gsmslo1').prop('disabled', true).val('').removeAttr("alt"); // disable and clear other fields
  else $(this).next('.gsmslo1').prop('disabled', false);
}).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This works on user input<br>
<input type="text" name="" value="" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />
<br><br> This should work if value is predefined<br>
<input type="text" name="" value="asdf" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />

Use this context
Use .trigger() to fire input on load

answered Mar 20, 2017 at 10:22

guradio

15.6k4 gold badges39 silver badges64 bronze badges

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

4 Comments

teva Over a year ago

I see now i was not clear enough with my question. Sorry about that. While code works here it doesn't work on my production. The issue might be that inputs are not together but are in separate div's. I updated fiddle jsfiddle.net/e8aqyvqa/19 to correctly show my situation. I also have three inputs that need to be disabled, but i don't think thats the problem.

guradio Over a year ago

@teva change your if condition to if ($(this).val().length == 0) to check for empty then disable

teva Over a year ago

Your suggestion didn't work, but i was able to fix it with just adding .trigger to my initial code. Works great now, thank you. Here is working fiddle jsfiddle.net/e8aqyvqa/20

teva Over a year ago

i was trying to pass your idea to another similar code, but didn't work. Do you care to look at another fiddle jsfiddle.net/Ly6u6dbj Same issue, when user inputs any field all others are disabled, but when predefined value is added, other fields are still active.

Ionut Necula · Accepted Answer · 2017-03-20 10:21:49Z

You can loop through the inputs to check if there are any values set and use $(this).next('.gsmslo1') to target the proper next input:

$('.gsmhr').on('input', function() {
  if ($(this).val().length) {
    $(this).next('.gsmslo1').prop('disabled', true).val('').removeAttr("alt"); // disable and clear other fields
  } else {
    $(this).next('.gsmslo1').prop('disabled', false);
  }
});
$('.gsmhr').each(function() {
  if ($(this).val().length) {
    $(this).next('.gsmslo1').prop('disabled', true).val('').removeAttr("alt"); // disable and clear other fields
  } else {
    $(this).next('.gsmslo1').prop('disabled', false);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This works on user input<br>
<input type="text" name="" value="" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />
<br><br> This should work if value is predefined<br>
<input type="text" name="" value="asdf" class="gsmhr" maxlength="15" size="17" />
<input type="text" name="" value="" class="gsmslo1" alt="simple" maxlength="3" size="1" />

Aneesh Sivaraman · Accepted Answer · 2017-03-20 11:05:10Z

0

Please use the following code.

$(document).ready(function() {
  function DisableEnableTextbox(currentElement){
      var value = $(currentElement).val();
        if (value.length) {
            $(currentElement).next(".gsmslo1").prop('disabled', true).val('');
        }
        else {
            $(currentElement).next(".gsmslo1").prop('disabled', false);
        }
  }

  $(".gsmhr").on("input", function() {
        DisableEnableTextbox(this);
  });

  $(".gsmhr").each(function(){
    DisableEnableTextbox(this);
  });
});

Refer Fiddle

answered Mar 20, 2017 at 11:05

Aneesh Sivaraman

9311 gold badge5 silver badges9 bronze badges

Collectives™ on Stack Overflow

jquery disable one input based on another

3 Answers 3

4 Comments

Comments

Comments

Your Answer

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

Related