Not working call jquery methods after receiving the ajax response

Question

When performing the ajax request produce some actions for the protection, namely:

$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.calc").attr({"disabled":"disabled"}); // deactivate press CALCULATE
$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.cancel").attr({"disabled":"disabled"}); // deactivate press CANCEL
$("#modal-afc-static > div > div > div.modal-header > button.close").attr({"disabled":"disabled"}) // deactivate press "X"

Buttons CANCEL, and CALCULATE and a cross "X" on the top - locked that is assigned to the attribute disabled="disabled" (this BootStrap).

After a response from the server I want to do the following:

$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.calc").children().detach(); // remove button to Calculate
$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.cancel").text("Close"); // change the name, click the CANCEL button to CLOSE
$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.cancel").attr({"disabled":""}); // activate again the CLOSE button
$("#modal-afc-static > div > div > div.modal-header > button.close").attr({"disabled":"disabled"}) // activate again click the cross

As we see, only triggered function .text("Close") and everything else fails:

Here is the procedure actions send data and receive a response in the variable data, the procedure standard (keyguard happens when you click to CALCULATE the sample code did not lead because it works and probably make no sense to show it):

// CalculateDataCurrentMonth - Asynchronous request to the server
function CommitDataCurrentMonth()
{
var sendMonth = $(".label.label-default.current-month").text();
sendPost_CommitDataCurrentMonth(url, { sendMonth: sendMonth, fnCommitDataCurrentMonth: true });
}

// Prepare POST request
function sendPost_CommitDataCurrentMonth(url, obj)
{
$.post(url,obj,onAjaxSuccess_CommitDataCurrentMonth);
}

// Display server response
function onAjaxSuccess_CommitDataCurrentMonth(data)
{
$("#modal-afc-static > div > div > div.modal-body > div.input-group.date").html(data);
$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.calc").children().detach();
$("#modal-afc-static > div > div > div.modal-header > button.close").attr({"disabled":""});
$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.cancel").text("Close");
$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.cancel").attr({"disabled":""});
}

Answer 1

You should remove the disabled attribute instead of giving its ""/any other value. Button will remain disabled even if you provide blank value to it. Browser just checks for the presence of disabled attribute. Fiddle to demonstrate the correct value for disabled attribute.

You can use jQuery removeAttr method

$("#modal-afc-static > div > div > div.modal-footer > button.btn.btn-default.cancel").removeAttr("disabled"); 
$("#modal-afc-static > div > div > div.modal-header > button.close").removeAttr("disabled")

This might help Correct value for disabled attribute