点击按钮后，jQuery Prop 不会禁用

jquery prop doesn't disabled after clicked button

本文关键字：Prop jQuery 按钮      更新时间：2023-09-26

我有一个关于jquery prop的问题。我从 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>

您不是针对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;
      ...
   });
});

更新的代码笔

当您使用此选择器时$('.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>

相关文章：