How to conditionally change custom attribute's property using jquery / javascript

Question

I have 3 input types. One textbox, two dates. I am setting up a custom attribute itself in the HTML as data-ischanged = false. In the change function, I am making it true. After saving the data (ajax call). I am trying to change the custom property to false once again. But I am unable to do so.

Any help will be appreciated.

HTML

                    <label>Description</label>
                    <input type="text" id="SelectedLookupTypeDescription" data-ischanged="false" />

                    <label style="padding:12px 12px">Eff. Start Date</label>
                    <input type="date" id="SelectedStartDate" data-ischanged="false" />

                    <label style="padding:12px 12px">Eff. End Date</label>
                    <input type="date" id="SelectedEndDate" data-ischanged="false" />

OnChange function below :

$('#SelectedLookupTypeDescription').on('change', function () {
    $('#SelectedLookupTypeDescription').attr("data-ischanged", true);
});

$("#SelectedStartDate").on('change', function () {
    $("#SelectedStartDate").attr("data-ischanged", true);
});

$('#SelectedEndDate').on('change', function () {
    $("#SelectedEndDate").attr("data-ischanged", true);
});

After the successful ajax call, using the below code I am trying to set the value to false

          var descselector = document.getElementById('SelectedLookupTypeDescription');
                descselector.setAttribute("data-ischanged", false);

                var StartSelector = document.getElementById('SelectedStartDate');
            StartSelector.setAttribute("data-ischanged", false);

                var EndSelector = document.getElementById('SelectedEndDate');
                EndSelector.setAttribute("data-ischanged", false);`

AJAX Code

    $.ajax({
        type: 'POST',
        url: '/Reference/UpdateLookupTypeData',
        data: { TypeData: TypeData },
        beforeSend: function (xhr) { xhr.setRequestHeader('X-XSRF-TOKEN', csrfToken); },
        success: function (RefResponse) {
            toastr.success("Data saved successfully");
            getOtherDetails(Id);

                //var descselector = document.getElementById('SelectedLookupTypeDescription');
                //descselector.setAttribute("data-ischanged", false);

                var StartSelector = document.getElementById('SelectedStartDate');
            StartSelector.setAttribute("data-ischanged", false);

                var EndSelector = document.getElementById('SelectedEndDate');
            EndSelector.setAttribute("data-ischanged", false);
           }
        });

Answer 1

Try the values to "false" not false