禁用以在选择元素时选择其他元素

I have an editable table when double click will change to and display update and cancel button. I would like to make it if one row or column are selected to edit, other element cannot be select for edit.

PHP

<table>
    <tr>
        <td>
            <table class="table small">
                <tr>
                    <td>Tb1</td>
                    <td class="editable myTd1" name="'.$arr['td1'].'" ondblclick="showEditable(this);"><span>...</span></td>
                </tr>
                <tr>...</tr>
                <p class="myBtn text-center" hidden>
                    <button class="update">Update</button>
                    <button class="cancel">cancel</button>
                </p>
            </table>
        </td>
        <td>...</td>
    </tr>
</table>

Javascript:

function showEditTable(isMy){
    var $this = $(isMy);
    var $id = $this.attr("name");
    var $col = $.trim($this.attr("class").replace("editable", ""));
    $(".myBtn").hide();
    $this.parents("td").find(".myBtn").show();
    var $input = $("<input>", {
                value: $this.find("span").attr("name"),
                type: "date",
                blur: function(){myUpdate($this, $col, $id);}
   }).appendTo( $this.empty()).focus();
}

You can write the following code in onclick event

$(this).siblings("td").css("pointer-events","none");

A short version of your code.

$('body').on('click','td',function(){ $(this).siblings('td').attr('contenteditable',false);  });
$('body').on('click','[submit_button_class] [disable_button_class_name]',function(){ $(this).parent().siblings('td').attr('contenteditable',true) });