Why is the checkbox not updating visually after using jQuery to uncheck it when clicking 'No' on a modal box?

huangapple
go评论91阅读模式
英文:

Why is the checkbox not updating visually after using jQuery to uncheck it when clicking 'No' on a modal box?

问题

当我点击模态框的"是"按钮时，我试图在jQuery中取消选中输入复选框，并在点击"否"按钮时选中它。

我可以在开发者工具中看到，当点击"是"时，已添加"checked"属性（checked = "checked"），当点击"否"时，已隐藏，但在用户界面中，选中标记没有更新。

我尝试过以下代码在"是"按钮中：

  1. $(this).prop("checked", true);

以及：

  1. $(this).attr("checked", true);

但都没有成功。

英文:

I am trying to uncheck input checkbox in jquery when i click No button of modal box and check it I click Yes button .

  1. $('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
  2.       if ($(this).is(':checked')) {
  3.         var $n = noty({
  4.           text: 'Please provide relevant complementary information about .....',
  5.           modal: true,
  6.           layout: 'center',
  7.           type: 'neutral',
  8.           buttons: [{
  9.             addClass: 'btn btn-default',
  10.             text: 'Ok',
  11.             onClick: function($noty) {
  12.               $(this).prop("checked","checked");
  13.               $noty.close();
  14.             }
  15.           },
  16.            {
  17.              addClass: 'btn btn-default',
  18.              text: 'No',
  19.              onClick: function ($noty) {
  20.                 $(this).removeAttr('checked');
  21.                 $noty.close();
  22.               }
  23.             }]
  24.         });
  25.         // Focus on "OK" button
  26.         $n.$buttons.find('#button-0').first().focus();
  27.         return false;
  28.       }
  29.     });

I can see in developer tool the checked is added(checked = "checked") when clicking yes and hidden when clicking no, but in the UI the checking mark is not updating.

I tried $(this).prop("checked","checked");
and $(this).prop("checked",true);
and also $(this).attr("checked",true);
in Yes button, but without success .

答案1

得分: 0

这段代码适用于您的情况。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  7.   <title>Checkbox and Modal Box</title>
  8. </head>
  9. <body>
  10.   <div class="container">
  11.     <div class="form-check">
  12.       <input class="form-check-input" type="checkbox" name="techOptions" value="8" id="techCheckbox">
  13.       <label class="form-check-label" for="techCheckbox">
  14.         Tech Option
  15.       </label>
  16.     </div>
  18.     <!-- Modal Box -->
  19.     <div class="modal" tabindex="-1" role="dialog" id="myModal">
  20.       <div class="modal-dialog" role="document">
  21.         <div class="modal-content">
  22.           <div class="modal-body">
  23.             <p>请提供有关.....的相关补充信息。</p>
  24.           </div>
  25.           <div class="modal-footer">
  26.             <button type="button" class="btn btn-primary" id="modal-ok">是</button>
  27.             <button type="button" class="btn btn-secondary" id="modal-no">否</button>
  28.           </div>
  29.         </div>
  30.       </div>
  31.     </div>
  32.   </div>
  34.   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  35.   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  36.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  37.   <script>
  38.     $(document).ready(function() {
  39.       $('body').off('change', '[name="techOptions"][value="8"]').on('change', '[name="techOptions"][value="8"]', function() {
  40.         if ($(this).is(':checked')) {
  41.           var $checkbox = $(this); // 将复选框元素存储在一个变量中
  43.           $('#myModal').modal('show'); // 显示模态框
  45.           // 处理“是”按钮点击
  46.           $('#modal-ok').on('click', function() {
  47.             $checkbox.prop("checked", true); // 勾选复选框
  48.             $('#myModal').modal('hide'); // 隐藏模态框
  49.           });
  51.           // 处理“否”按钮点击
  52.           $('#modal-no').on('click', function() {
  53.             $checkbox.prop("checked", false); // 取消勾选复选框
  54.             $('#myModal').modal('hide'); // 隐藏模态框
  55.           });
  56.         }
  57.       });
  58.     });
  59.   </script>
  60. </body>
  61. </html>

希望这对您有所帮助。

英文:

This code work for your case

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
  7. &lt;title&gt;Checkbox and Modal Box&lt;/title&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;div class=&quot;container&quot;&gt;
  11. &lt;div class=&quot;form-check&quot;&gt;
  12. &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; name=&quot;techOptions&quot; value=&quot;8&quot; id=&quot;techCheckbox&quot;&gt;
  13. &lt;label class=&quot;form-check-label&quot; for=&quot;techCheckbox&quot;&gt;
  14. Tech Option
  15. &lt;/label&gt;
  16. &lt;/div&gt;
  17. &lt;!-- Modal Box --&gt;
  18. &lt;div class=&quot;modal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; id=&quot;myModal&quot;&gt;
  19. &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
  20. &lt;div class=&quot;modal-content&quot;&gt;
  21. &lt;div class=&quot;modal-body&quot;&gt;
  22. &lt;p&gt;Please provide relevant complementary information about .....&lt;/p&gt;
  23. &lt;/div&gt;
  24. &lt;div class=&quot;modal-footer&quot;&gt;
  25. &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; id=&quot;modal-ok&quot;&gt;Yes&lt;/button&gt;
  26. &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; id=&quot;modal-no&quot;&gt;No&lt;/button&gt;
  27. &lt;/div&gt;
  28. &lt;/div&gt;
  29. &lt;/div&gt;
  30. &lt;/div&gt;
  31. &lt;/div&gt;
  32. &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot;&gt;&lt;/script&gt;
  33. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  34. &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  35. &lt;script&gt;
  36. $(document).ready(function() {
  37. $(&#39;body&#39;).off(&#39;change&#39;, &#39;[name=&quot;techOptions&quot;][value=&quot;8&quot;]&#39;).on(&#39;change&#39;, &#39;[name=&quot;techOptions&quot;][value=&quot;8&quot;]&#39;, function() {
  38. if ($(this).is(&#39;:checked&#39;)) {
  39. var $checkbox = $(this); // Store the checkbox element in a variable
  40. $(&#39;#myModal&#39;).modal(&#39;show&#39;); // Show the modal box
  41. // Handle &quot;Yes&quot; button click
  42. $(&#39;#modal-ok&#39;).on(&#39;click&#39;, function() {
  43. $checkbox.prop(&quot;checked&quot;, true); // Check the checkbox
  44. $(&#39;#myModal&#39;).modal(&#39;hide&#39;); // Hide the modal box
  45. });
  46. // Handle &quot;No&quot; button click
  47. $(&#39;#modal-no&#39;).on(&#39;click&#39;, function() {
  48. $checkbox.prop(&quot;checked&quot;, false); // Uncheck the checkbox
  49. $(&#39;#myModal&#39;).modal(&#39;hide&#39;); // Hide the modal box
  50. });
  51. }
  52. });
  53. });
  54. &lt;/script&gt;
  55. &lt;/body&gt;
  56. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月29日 05:44:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76353715.html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定