一页上有两个对话框并启用复选框？答案

【问题标题】：Two dialog boxes on one page and enabling checkboxes?一页上有两个对话框并启用复选框？
【发布时间】：2021-01-30 06:43:45
【问题描述】：

我正在创建一个带有“同意行为准则和准则”复选框的表单，其中“行为准则”和“准则”是打开对话框的超链接。但是，我不希望在单击两个超链接之前启用此复选框（也就是用户无法单击该复选框）。

代码如下：

<input className="checkbox" type="checkbox" placeholder="CodeofConduct" name="coc" ref={register({ required: true })} /><span>Agree to <a id="link1" className="coc" onClick={handleClickOpen('paper')}>Code of Conduct</a> and <a id="link2" className="guideline" onClick={handleClickOpen('paper')}>Guidelines</a></span>

{errors.coc && errors.coc.type === "required" && <span className="error">You must agree to the Code of Conduct and Guidelines.</span>}

<Dialog id="link1"
  open={open}
  onClose={handleClose}
  scroll={scroll}>
  <DialogTitle id="scroll-dialog-title">Code of Conduct: Our Values</DialogTitle>
  <DialogContent dividers={scroll === 'paper'}>
    ... //Dialog content
  </DialogContent>
</Dialog>

<Dialog id="link2"
  open={open}
  onClose={handleClose}
  scroll={scroll}>
  <DialogTitle id="scroll-dialog-title">Code of Conduct: Our Values</DialogTitle>
  <DialogContent dividers={scroll === 'paper'}>
    ... //Dialog content
  </DialogContent>
</Dialog>

我需要一个函数来跟踪这两个超链接是否已被单击，并确保在单击每个链接时出现相应的对话框。现在，只有标记为link2 的对话框内容显示在我的两个对话框中。有人可以告诉我如何在同一页面上显示两个对话框，以及仅在单击这两个链接时启用它们旁边的复选框吗？

【问题讨论】：

标签： javascript html reactjs checkbox dialog

【解决方案1】：

这只是检查两个链接是否被点击的解决方案！

您可以尝试使用脚本来监听链接是否被点击。

<a id="link1" target="_blank" href="https://google.com/">Link 1</a> <br>
<a id="link2" target="_blank" href="https://youtube.com">Link 2</a>

<script>
  var link1;   // Create a boolean to save if link1 has been clicked
  var link2;   // Create a boolean to save if link2 has been clicked

  document.getElementById("link1").addEventListener("click", link1_true, true);   // Listen click of element with id "link1" 
  document.getElementById("link2").addEventListener("click", link2_true, true);   // Listen click of element with id "link2" 

  function link1_true() {   // Change the state of the variable to true
    link1 = true;           // Set the variable "link2" to true to save that it has been clicked
    check_link_state()      // Run "check_link_state" function to check if both links have been clicked
  }

  function link2_true() {   // Change the state of the variable to true
    link2 = true;           // Set the variable "link2" to true to save that it has been clicked
    check_link_state()      // Run "check_link_state" function to check if both links have been clicked
  }

  function check_link_state() {
    if ((link1 == true) && (link2 == true)) {   // Check if both links have been clicked
      alert("Both links have been clicked!");  
      // Put here the code to execute if both links have been clicked
    }
  }
</script>

【讨论】：