如何解决一页上有两个对话框并启用了复选框?
我正在创建一个带有“同意行为准则和准则”复选框的表单,其中“行为准则”和“准则”是打开对话框的超链接。但是,在他们都单击两个超链接之前,我不希望启用此复选框(也就是用户无法单击该复选框)。
代码显示在这里:
<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
的对话框内容。有人可以告诉我如何在同一页面上显示两个对话框,以及仅在同时单击这两个链接时启用它们旁边的复选框吗?
解决方法
这仅是检查是否单击了两个链接的解决方案!
您可以尝试使用脚本来侦听是否已单击链接。
<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>
。
{{1}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。