单击按钮后jquery支柱不会被禁用

Question

我有一个关于jquery道具的问题。我已经从演示 codepen.io创建了这个

在这个演示中，您可以看到有两个带有id的编辑按钮。当我点击第一个编辑按钮时，它就正常工作了。但编辑按钮也工作，第二次点击，我想禁用当前点击按钮。在这方面，有人能帮我吗？

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');

或

您想做的一种javascript方式是公开event对象并设置event.target的disabled属性

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

      ...
   });
});

更新的CodePen

Answer 2

当您使用这个选择器$('.editBtn' + ID).prop('disabled', 'true')时，editBtn1 or editBtn2 class没有任何按钮，所以我只使用id selector，

检查下面的片段

​

$(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>

​