1

I have a web app where I need to display a set of input text boxes if the applicant has a US address; if the applicant has a non-US address, some of the US text boxes are disabled and some previously disabled text boxes are enabled (basically toggles on/off Non US Address boxes and US address boxes).

This is the code I currently have. It works with JQuery 1.7 but .change(fn) and perhaps other parts of the code appear to be deprectated in more recent versions of JQuery. I'm new to JQuery, so I'm not sure how to rewrite this. I haven't been able to find any examples on Google. 

$(document).ready(function() {
  $('#ForeignAddress').change(function() {
    if ($(this).attr('checked')) {
      $('#nonUSAddress').removeAttr('disabled');
      $('#USAddress').attr('disabled', 'disabled');
    } else {
      $('#nonUSAddress').attr('disabled', 'disabled');
      $('#USAddress').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <p><input id="ForeignAddress" type="checkbox" /> Foreign Address</p>
  <input id="nonUSAddress" type="text" value="NON US ADDRESS" disabled="disabled" />
  <input id="USAddress" type="text" value="US ADDRESS" />
</form>

The snippet currently works because of the version of JQuery I've chosen, but if I set it to more recent JQuery, it doesn't work. If someone could provide an example of how I should write this without using the deprecated shortcut code, that would be great. Thank you!

Barmar
  • 741,623
  • 53
  • 500
  • 612
Todd H
  • 19
  • 2
  • I don't think there's anything deprecated in what you've written. – Barmar Apr 03 '18 at 21:36
  • Thanks to Kevin B for the link to the duplicate question, but I think that would have taken me a long time to figure out by reading the answers to that previous "duplicate" question. Being new to Jquery, Barmar's answer was the most helpful. I do appreciate the answers on the previous question, and I will certainly read them and try to understand. – Todd H Apr 03 '18 at 22:09
  • The reference to that question might have simply prompted you to try switching from attr to prop and you would have seen that it works. – Barmar Apr 04 '18 at 15:30

2 Answers2

1

You need to use $(this).prop('checked'). To solve those issues yourself, just take a look to the console output and google the corresponding JQMIGRATE text. In this case, I got that: JQMIGRATE: jQuery.fn.attr('selected') may use property instead of attribute

Paul
  • 2,086
  • 1
  • 8
  • 16
  • Thanks, Paul. When I used the console output and looked at JQMigrate, I got JQMIGRATE: jQuery.fn.change() event shorthand is deprecated. That's why I thought it was a deprecated shorthand approach or something I was using. Maybe I wasn't using JQMIGRATE properly. Using .prop('checked') works. Thanks again for your help! – Todd H Apr 03 '18 at 21:46
1

Use .prop instead of .attr to test whether the box is checked. Or just this.checked.

See .prop() vs .attr().

$(document).ready(function() {
  $('#ForeignAddress').change(function() {
    if ($(this).prop('checked')) {
      $('#nonUSAddress').removeAttr('disabled');
      $('#USAddress').attr('disabled', 'disabled');
    } else {
      $('#nonUSAddress').attr('disabled', 'disabled');
      $('#USAddress').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p><input id="ForeignAddress" type="checkbox" /> Foreign Address</p>
  <input id="nonUSAddress" type="text" value="NON US ADDRESS" disabled="disabled" />
  <input id="USAddress" type="text" value="US ADDRESS" />
</form>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Thanks, Barmar. This worked! I appreciate it. Thanks so much for showing me the code. I learn best by looking at examples. Cheers! – Todd H Apr 03 '18 at 21:48