单击相应复选框时如何启用禁用的锚按钮答案

【问题标题】：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>

【问题讨论】：

标签： javascript html jquery css dom

【解决方案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>

【讨论】：