无法禁用onclick（）

Question

I am trying to disable the onclick event but it doesn't seem to work. The main page pops up a modal, and then I use onclick() to allow the end user to edit a piece of content on the page.

Once done, I want to use OnBlur() to run another script which updates the database. This function works fine with normal text boxes, but I need to disable the onclick event, since I'm now displaying a select box with this function:

function EditField(editableObj,column,app_id) {
    $(editableObj).css("background","#B8B8FA");
    $(this).attr('disabled', true);
    var data = `<input type="checkbox" name="YesNo" id="YesNo" checked data-toggle="toggle" data-off="No" data-on="Yes" data-onstyle="success" data-offstyle="danger">`;
    $(editableObj).html(data);

}

This is a PHP script:

echo "<td contenteditable=\"true\" onBlur=\"saveToDatabase(this,'credit_checks','".$results[$k]["app_id"]."')\" onClick=\"EditField(this,'credit_checks','".$results[$k]["app_id"]."'); \">".(($results[$k]["credit_checks"] == "Yes") ? "<img src=\"images/checkmark.png\" width=\"20\" height=\"20\" />" : "")."</td>";

I have tried the option

 $(editableObj).prop('disabled', true);

as well, but it still doesn't seem to work.

As soon as I click on the field, the checkbox appears, but it's already clicked and It doesn't change the option.

Answer 1

You should make the function return false to disable the event

function EditField(editableObj,column,app_id) {
    if ($(this).attr('disabled')) {
        return false;
    }

    $(editableObj).css("background","#B8B8FA");
    $(this).attr('disabled', true);
    var data = `<input type="checkbox" name="YesNo" id="YesNo" checked data-toggle="toggle" data-off="No" data-on="Yes" data-onstyle="success" data-offstyle="danger">`;
    $(editableObj).html(data)
}