Is there a way to delete a form element without using jQuery .remove()?

Question

Using .remove() so that the select all check box is not submitted to the server.

However, it is visible to the user as the select all checkbox is "physically" removed from the web page, upon submit.

Instead, I would like removing the select all check box to appear seamless but NOT on the server side. i.e. - I would like to keep the input on the page but remove the element in the form array before it is sent.

Can I manipulate the element[] array of the form before it is sent to the server and delete it there?

Thank you.

Answer 1

If you disable the checkbox, it won't be sent along with the rest of the form:

$('#myInp').attr("disabled", true);

Using this method, you could disable the element during submit and enable it again immediately after:

$('#myForm').submit(function()
{
    var $myInp = $('#myInp');
    $myInp.attr("disabled", true);
    window.setTimeout(function () 
    {
        $myInp.attr("disabled", false);
    }, 0);
});

Answer 2

both Andy E and munch have viable solutions. Here's another:

Replace it with another, inert checkbox

$('#select-all-checkbox').replaceWith( '<input type="checkbox"/>' );

Of course, this can create issues if the form submission fails for some reason.