How can I toggle required field? Using Drupal 7.

I'm trying to toggle required field based on the click of a radio button.

I already tried the proposed solution in this post but it did not work.

Here is my code:

        $(context).find('.field-name-field-stop-displaying-after').hide();
        $(context).find('.field-name-field-stop-displaying-after').removeClass('required');
        $(context).find("input[name='field_status[und]']").click(function() {
          var radioSelect = $(this).val();
          if (radioSelect == 0) {
            $(context).find('.field-name-field-stop-displaying-after').hide();
            $(context).find('.field-name-field-stop-displaying-after').removeClass('required');
          } else {
            $(context).find('.field-name-field-stop-displaying-after').show();
            $(context).find('.field-name-field-stop-displaying-after').addClass('required');
          }
        });


Note that the hide/show toggle works properly.

For the required class, I am targeting the element that the system targets when I set it as required in configuration. The required class is toggled on the element, but does not actually toggle the requirement. In other words, if the field is hidden, it should not be required, but it remains required. The only difference I can see with the system setting is that it adds a legend element that describes the field as required.

What am I missing here? How can I toggle the requirement of the field?
In my case, I actually didn't need server-side validation; I just needed validation to serve as a reminder to fill out an exposed field. Instead, I added field-level validation with required.

$(context).find('.field-name-field-stop-displaying-after').hide();
$(context).find("input[name='field_stop_displaying_after[und][0][value][date]']").prop('required',false);
$(context).find("input[name='field_status[und]']").click(function() {
    var radioSelect = $(this).val();
    if (radioSelect == 0) {
        $(context).find('.field-name-field-stop-displaying-after').hide();
        $(context).find("input[name='field_stop_displaying_after[und][0][value][date]']").prop('required',false);
    } else {
        $(context).find('.field-name-field-stop-displaying-after').show();
        $(context).find("input[name='field_stop_displaying_after[und][0][value][date]']").prop('required',true);
    }
});