单击相应复选框时如何启用禁用的锚按钮
Posted
技术标签:
【中文标题】单击相应复选框时如何启用禁用的锚按钮【英文标题】：How to enable a disabled anchor button when respective checkbox will be clicked 【发布时间】：2021-03-31 21:36:23 【问题描述】：最初，导出到 CSV(2SD) 和导出到 CSV(3SD) 都应该被禁用。我只想在单击 2 标准偏差复选框时启用导出到 CSV(2SD) 按钮，并且在 2 标准偏差时与另一个按钮类似单击复选框，它将仅启用导出到 CSV(3SD) 锚按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- cdn links to apply bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<!-- add icon link -->
<link rel="icon" href="https://yoyosarkari.com/wp-content/uploads/2020/07/NIMS.jpg" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="col-md-3">
<strong><label>Select Outlier Range :</label></strong>
<div class="form-check">
<input type="checkbox" id="2SD" name="2std" value="2 Standard Deviation" class="form-check-input"
onclick="undisableBtn1()" id="materialIndeterminate1" unchecked>
<label class="form-check-label" for="materialIndeterminate2">2 Standard Deviation</label>
</div>
<div class="form-check">
<input type="checkbox" id="3SD" name="3std" value="3 Standard Deviation" class="form-check-input"
onclick="undisableBtn2()" id="materialIndeterminate2" unchecked>
<label class="form-check-label" for="materialIndeterminate2">3 Standard Deviation</label>
</div>
<input type="hidden" name='path' value= path ></input>
</div>
<div class="col-md-3">
<a href=% static '/2_Standard_Deviation.csv' % id="button4" onclick="return false" class="btn btn-primary" download>Export to CSV(2 SD)</a>
</br></br>
<a href=% static '/3_Standard_Deviation.csv' % id="button5" onclick="return false" class="btn btn-primary" download>Export to CSV(3 SD)</a>
</br></br>
<!--<form action='/Clear'>-->
<a href=" " id="button6" class="btn btn-danger">Reset</a>
<!--</form>-->
</div>
<script>
// function myFunction()
// var checkBox1 = document.getElementById("2SD");
// var checkBox2 = document.getElementById("3SD");
// if (checkBox1.checked == true)
// document.getElementById("button4").disabled = false;
// console.log('button4')
// else if (checkBox2.checked == true)
// document.getElementById("button5").disabled = false;
// console.log('button5')
//
//
function undisableBtn1()
//document.getElementById("2SD").disabled = false;
$('#button4').click(function(e)
$(this).addClass('enabled');
//do other stuff when a click happens
);
console.log('button4')
function undisableBtn2()
//document.getElementById("3SD").disabled = false;
$('#button5').click(function(e)
$(this).addClass('enabled');
//do other stuff when a click happens
);
console.log('button5')
</script>
</body>
</html>【问题讨论】：
【参考方案1】：你需要在head部分导入jQuery库：
https://code.jquery.com/
例如，使用 3.5.1 版将以下脚本添加到 <head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
【讨论】：
嘿，我试过了，但还是不行。【参考方案2】：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- cdn links to apply bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<!-- add icon link -->
<link rel="icon" href="https://yoyosarkari.com/wp-content/uploads/2020/07/NIMS.jpg" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<style>
.selected
background-color: yellow;
td
border: 1px solid black;
padding: 20px;
</style>
</head>
<body>
<!-- <input type="button" id="cont" value="continue" disabled="disabled"> -->
<a href="https://www.google.com" id="cont" value="continue" class="btn btn-primary" download>Export to CSV(2 SD)</a>
<input type="checkbox" name="check" id="check" />
<script>
$(document).ready(function ()
$('#cont').css( pointerEvents: "none" )
);
</script>
<script>
$(document).ready(function ()
$('[id="check"]').change(function (event)
$('#cont').css( pointerEvents: "auto" )
);
);
</script>
</body>
</html>【讨论】：
以上是关于单击相应复选框时如何启用禁用的锚按钮的主要内容，如果未能解决你的问题，请参考以下文章