CODEWITHSUNDEEP
javascriptjqueryhtml
teva
teva

Reputation: 117

jquery disable one input based on another

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

Upvotes: 1

Views: 698

Answers (3)

Aneesh Sivaraman
Aneesh Sivaraman

Reputation: 931

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

Upvotes: 0

guradio
guradio

Reputation: 15555

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

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

Upvotes: 1

Ionut Necula
Ionut Necula

Reputation: 11462

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

Upvotes: 0

Related Questions