为什么当在模态框上单击“否”时，使用jQuery取消选中复选框后复选框没有可视化更新？

46qrfjad 于 2023-06-05 发布在 jQuery

关注(0)|答案(1)|浏览(383)

我试图取消选中jquery中的输入复选框，当我单击模态框的No按钮并选中它时，我单击Yes按钮。

$('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
      if ($(this).is(':checked')) {
        var $n = noty({
          text: 'Please provide relevant complementary information about .....',
          modal: true,
          layout: 'center',
          type: 'neutral',
          buttons: [{
            addClass: 'btn btn-default',
            text: 'Ok',
            onClick: function($noty) {
              $(this).prop("checked","checked");
              $noty.close();
            }
          },
           {
             addClass: 'btn btn-default',
             text: 'No',
             onClick: function ($noty) {
                $(this).removeAttr('checked');
                $noty.close();
              }
            }]
        });
        // Focus on "OK" button
        $n.$buttons.find('#button-0').first().focus();
        return false;
      }
    });

我可以在开发者工具中看到，当单击“是”时，选中的标记被添加（checked =“checked”），当单击“否”时，选中的标记被隐藏，但在UI中，选中标记没有更新。
我尝试了$(this).prop("checked","checked");和$(this).prop("checked",true);，也在是按钮$(this).attr("checked",true);，但没有成功。

jquery

来源：https://stackoverflow.com/questions/76353715/why-is-the-checkbox-not-updating-visually-after-using-jquery-to-uncheck-it-when

1条答案

按热度按时间

wnavrhmk1#

这个密码对你的案子有用吗

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Checkbox and Modal Box</title>
</head>
<body>
  <div class="container">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="techOptions" value="8" id="techCheckbox">
      <label class="form-check-label" for="techCheckbox">
        Tech Option
      </label>
    </div>

    <!-- Modal Box -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <p>Please provide relevant complementary information about .....</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="modal-ok">Yes</button>
            <button type="button" class="btn btn-secondary" id="modal-no">No</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
        if ($(this).is(':checked')) {
          var $checkbox = $(this); // Store the checkbox element in a variable

          $('#myModal').modal('show'); // Show the modal box

          // Handle "Yes" button click
          $('#modal-ok').on('click', function() {
            $checkbox.prop("checked", true); // Check the checkbox
            $('#myModal').modal('hide'); // Hide the modal box
          });

          // Handle "No" button click
          $('#modal-no').on('click', function() {
            $checkbox.prop("checked", false); // Uncheck the checkbox
            $('#myModal').modal('hide'); // Hide the modal box
          });
        }
      });
    });
  </script>
</body>
</html>

赞(0）回复(0）举报 2023-06-05

我来回答

为什么当在模态框上单击“否”时，使用jQuery取消选中复选框后复选框没有可视化更新？

1条答案

相关问题

热门标签

最新问答