X可编辑的带有类的编辑切换功能

Question

我正在Bootstrap 3中使用X-editble。

当我使用按钮来编辑文件时，我看到所有可编辑字段都很快打开，这是问题1。

此后该功能正常运行，但是当我想关闭这些字段仍可编辑（请参见虚线）时，出现此问题2。

如何防止这种情况？

See this small video of the problem

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger">

  <tr>
    <td style="width:30px"><span class="fas fa-user" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|naam|1" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['naam']; ?></span></td>
  </tr>
  <tr>
    <td style="width:30px"><span class="fas fa-envelope" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|email|1" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['email']; ?></span></td>
  </tr>
  <tr>
    <td style="width:30px"><span class="fas fa-phone" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|tel|0|num" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['tel']; ?></span></td>
  </tr>
  <tr>
    <td style="width:30px"><span class="fas fa-mobile-alt" aria-hidden="true"></span></td>
    <td><span class="editable_textfield" data-type="text" data-name="users|mob|0|num" data-pk="<?php echo $_SESSION['user_id']; ?>" data-url="processing/inline_editing.php"><?php echo $row['mob']; ?></span></td>
  </tr>


$(document).ready(function(){
    $('#toggle-event').change(function(e) {
    e.stopPropagation();
    $('.editable_textfield').editable('toggle');
    });
});