单击另一个按钮时,一个按钮被禁用

时间:2017-04-06 06:51:52

标签: javascript jquery html

我对Coding完全不熟悉,我的朋友建议我学习php,所以他给了我一个小项目,我应该尝试,这是一个员工门户网站。我坚持一件事。

我需要一个接受拒绝按钮,当我点击批准按钮时,应该禁用拒绝按钮,并且按钮中的值应该在数据库中自动更新,反之亦然。还有一件事是,当我点击拒绝按钮时,会弹出一个评论框,输入的值应该添加到数据库

<!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <?php
    include'nav.php';

    $servername = "127.0.0.1";
    $username = "root";
    $password = "";
    $dbname = "";

    $conn = new mysqli($servername, $username, $password, $dbname);


    if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    }


    $sql=mysqli_query($conn, "SELECT user, leavetype, date, date1, numb, comment FROM lms");
    /*$result= $conn->query($sql);*/

    if ($sql) {
    if ($sql->num_rows > 1) {
    echo "<table class='table table-hover'><tr><td>User</td><td>Leave type</td><td>From date</td><td>To date</td><td>Number of days</td><td>Reason for leave</td><td></tr>";      
    while( $row=mysqli_fetch_array($sql)) 
    {
    echo "<tr><td id='rowhead'>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td><td>$row[4]</td><td>$row[5]</td><td><button type='button' class='btn btn-success'>Approve</button> | <button type='button' class='btn btn-danger'>Rejected</button></td></tr>";
    }
      echo'</table>';
    }
    else {
    echo "<br> No Record Found to display";
    }
    }
    else {
    echo "<br> Database error.";
    }
    $conn->close();
    ?>

    </body>
    </html>

3 个答案:

答案 0 :(得分:1)

在您的代码中,您可以采用简单的方法:

&#13;
&#13;
<button type='button' class='btn btn-success' id="accept" onClick="document.getElementById('reject').setAttribute('disabled',true);">Approve</button> | <button type='button' class='btn btn-danger' id="reject" onClick="document.getElementById('accept').setAttribute('disabled',true);">Rejected</button>
&#13;
&#13;
&#13;

我们在这里做的是:

为每个名为“接受和拒绝”的按钮分配一个ID。

点击一个按钮,我们禁用另一个按钮:

要禁用的JS代码是以下使用onclick处理程序单击按钮时调用的id:

document.getElementById('THE_ID').setAttribute('disabled',true);

答案 1 :(得分:0)

&#13;
&#13;
$(document).ready(function(){
  $("#comment").hide();
    $("#accept").click(function(){
    $("#reject").attr('disabled','disabled');
     $("#accept").removeAttr('disabled');
    });
    $("#reject").click(function(){
      $("#accept").attr('disabled','disabled')
       $("#reject").removeAttr('disabled');
       $("#comment").show();
    });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="accept" id="accept"/>
<input type="button" value="reject" id="reject"/>

<p><textarea id="comment"></textarea></p>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
    function approveData(){
        alert("Popup : Data will be approved");
        $('#reject').attr('disabled','disabled');
    }
    function rejectData(){
        alert("Popup : Data will be reject");
        $('#approve').attr('disabled','disabled');
    }
  </script>
<input type="button" id="approve" value="Approve" onclick="approveData()"/>
<input type="button" id="reject" value="Reject" onclick="rejectData()"/>