选中复选框时禁用按钮数组中的一个按钮

Question

我想在选中复选框时禁用 jQuery 对话框按钮。在下面的代码中，它是

Update the counter

复选框。是否可以达到同样的效果？

let additionalValue = "ABC12345";

console.log("Login next suggested value " + additionalValue + "");

let buttons = {};

// Use bracket notation to set a dynamic property key for the object
buttons["Login next suggested value " + additionalValue] = function() {
    $(this).dialog("close");
};
buttons["Login case number of your choice"] = function() {
    $(this).dialog("close");
};
buttons["Cancel button"] = function() {
    $(this).dialog("close");
};

$("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: buttons
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>jQuery UI Dialog - Modal confirmation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  
  <div id="dialog-confirm" title="Select your choice!?">
  <p><span>The next sequential value for the Case number is 1001 .\n\nClick Yes to use the next sequential value or Cancel to proceed with yours!</span></p>
  <p><input type="checkbox" id="update_counter_checkbox" name="update_counter_checkbox" />Update the counter</p>
</div>

Answer 1

$(document).ready(function() {
  let additionalValue = "ABC12345";

  let buttons = {};

  buttons["Login next suggested value " + additionalValue] = function() {
    $(this).dialog("close");
  };

  buttons["Login case number of your choice"] = function() {
    $(this).dialog("close");
  };

  buttons["Cancel button"] = function() {
    $(this).dialog("close");
  };

  $("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: buttons
  });

  // Event handler for the checkbox change event
  $("#update_counter_checkbox").change(function() {
    if ($(this).prop("checked")) {
      // If the checkbox is checked, disable the button
      $("#dialog-confirm").dialog("widget").find(".ui-button:contains('Login next suggested value " + additionalValue + "')").button("disable");
    } else {
      // If the checkbox is unchecked, enable the button
      $("#dialog-confirm").dialog("widget").find(".ui-button:contains('Login next suggested value " + additionalValue + "')").button("enable");
    }
  });
});

我希望它对你有用。