单击按钮

Question

我有一个关于jquery道具的问题。我已从codepen.io

创建了 DEMO

在此演示中，您可以看到有两个带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');

OR

执行所需操作的javascript方式是公开event对象并设置disabled的{​​{1}}属性：

event.target

Updated 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>