Javascript 为什么在使用 jQuery 取消选中模式框上的否后复选框没有在视觉上更新

发布于05月29日

我正在try 取消选中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;
      }
    });

在开发人员工具中，我可以看到当点击是时，勾选被添加(勾选="勾选")，当点击否时，勾选标记被隐藏，但在UI中勾选标记没有更新.

我试了$(this).prop("checked","checked"); 和$(this).prop("checked",true); 还有$(this).attr("checked",true); 在是按钮中，但没有成功.

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

Javascript 为什么在使用 jQuery 取消选中模式框上的否后复选框没有在视觉上更新

推荐答案

Javascript相关问答推荐

使用jsPDF添加Image JPEG将p5.js草图画布下载为PDF

如何避免使用ajax在Vue 3合成API中重定向

调用SEARCH函数后，程序不会结束

reaction如何在不使用符号的情况下允许多行返回？

React Native平面列表自动滚动

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

如何解决chrome—extension代码中的错误，它会实时覆盖google—meet的面部图像？'

WebRTC关闭navigator. getUserMedia正确

如何禁用附加图标点击的v—自动完成事件

从Node JS将对象数组中的数据插入Postgres表

Chart.js 4.4.2，当悬停在一个数据点上时，如何在工具提示中拥有多个数据点/标签？

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

如何使用子字符串在数组中搜索重复项

编辑文本无响应.onClick(扩展脚本)

在VS代码上一次设置多个变量格式

为什么在函数中添加粒子的速率大于删除粒子的速率？

如何更改Html元素S的 colored颜色，然后将其褪色为原始 colored颜色

重新呈现-react -筛选数据过多

在JavaScript中将Base64转换为JSON