Question

I have a form that can appear on different pages, and depending on the circumstance, the fields are not always required.

I have the code to hide the div, but need the input fields to no longer be required. Using the HTML5 Required attribute. Having trouble getting the code to work. Code is below:

$('#detailssame').click(function() {
    if($(this).is(':checked')) {
        $(\"#detailssamehide\").hide();
    } else {
        $(\"#detailssamehide\").show();
    }               
});
$('.fullboxform input[type=text], .fullboxform select').each(function() {
            $(this).removeAttr('required');
});

All help is greatly appreciated.

Turns out the above code does work correctly, but alternative answer available using prop

Answer 1

Try to use the prop() function for setting HTML5 properties.

$(function () {
    $('#detailssame').click(function() {
        var checked = $(this).is(':checked');
        if(checked) {
            $("#detailssamehide").hide();
        } else {
            $("#detailssamehide").show();
        }     
        $('.fullboxform input[type=text], .fullboxform select').each(function() {
            $(this).prop('required', !checked);
        });
    });
});

http://jsfiddle.net/ThsXU/