jQuery - How to removeProp on checkbox change?

Question

I have checkbox that I'm using to toggle whether an input field is "required" using jQuery. This is part of Foundation Abide validation. So, at the end of the input field it needs to add/remove the word "required".

The box is checked by default. When the user unchecks the box it adds "required" to the input as it should (else if). However, if you recheck the box, the "removeProp" doesn't remove "required". What am I doing wrong on this? I've tried both prop and attr functions with the same result.

<input type="checkbox" id="billing" checked>

<input type="text" id="b_name" pattern="alpha" required>


$('#billing').change(function() {

    // Same as Shipping Address
    if ($(this).is(':checked')) {
      $('#b_name').removeProp('required');
    }
    else if (!$(this).is(':checked')) {
      $('#b_name').prop('required', true);
    }

  });

Answer 1

Try this:

$('#billing').change(function() {

    // Same as Shipping Address
    if ($(this).is(':checked')) {
      $('#b_name').prop('required', false);
    }
    else {
      $('#b_name').prop('required', true);
    }

  });