點擊按鈕後，jQuery的道具不會被禁用

Question

我有一個關於jquery道具的問題。我已經創建了這個DEMO codepen.io

在這個演示中，你可以看到有兩個帶編號的編輯按鈕。當我點擊第一個編輯按鈕時，它工作正常。但編輯按鈕的工作也第二次點擊我想禁用當前點擊按鈕。我在這裏想念的人在這方面可以幫助我嗎？

JS

$(document).ready(function() { 
    $("body").on("click", ".editBtn", function() { 
     var ID = $(this).attr("id"); 
     $('#ser' + ID).prop('disabled', 'true'); 
     var currentMessage = $("#messageB" + ID + " .postInfo").html(); 
     var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea><button name="ok">Save</button><button name="cancel">Cancel</button>'; 
     $("#messageB" + ID + " .postInfo").html(editMarkUp); 
    }); 
}); 

HTML

<div class="container"> 
    <div class="postAr" id="messageB1"> 
     <div class="postInfo"> 
     fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsa 
     </div> 
     <button class="editBtn" name="edit" id="ser1">Edit</button> 
    </div> 
</div> 
<div class="container"> 
    <div class="postAr" id="messageB2"> 
     <div class="postInfo"> 
     fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsass 
     </div> 
     <button class="editBtn" name="edit" id="ser2">Edit</button> 
    </div> 
</div> 

Answer 1

你不是針對button。使用$(this).prop()

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

OR

做你想要什麼的JavaScript的方法是暴露event對象並設置的event.target的disabled屬性：

$(document).ready(function() { 
    $("body").on("click", ".editBtn", function(event) { 
     event.target.disabled = true; 

     ... 
    }); 
}); 

Updated CodePen

Answer 2

當你使用這個選擇器$('.editBtn' + ID).prop('disabled', 'true')你沒有任何帶有的按鈕所以我用下面

$(document).ready(function() { 
 
    $("body").on("click", ".editBtn", function() { 
 
    var ID = $(this).attr("id"); 
 
    
 
    $('#' + ID).prop('disabled', 'true'); 
 
    var currentMessage = $("#messageB" + ID + " .postInfo").html(); 
 
    var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea><button name="ok">Save</button><button name="cancel">Cancel</button>'; 
 
    $("#messageB" + ID + " .postInfo").html(editMarkUp); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="postAr" id="messageB1"> 
 
    <div class="postInfo"> 
 
     fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsa 
 
    </div> 
 
    <button class="editBtn" name="edit" id="1">Edit</button> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="postAr" id="messageB2"> 
 
    <div class="postInfo"> 
 
     fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsass 
 
    </div> 
 
    <button class="editBtn" name="edit" id="2">Edit</button> 
 
    </div> 
 
</div>