How to enable or disable a click on a table row in jquery? What I want to accomplish are, when a user click the edit button, user cannot select/click a table row. When a user click either the save button or cancel button a user can select/click a table row. I already implemented my solution but it is not working. I already put comments where the problem occurs. Here is the link to my code https://jsfiddle.net/Xonnn/ngka3Lh9/2/.

CodePudding user response：

I've added a variable editRowEnable

This the code will set as true/false depending on if edit row is "active"

Pending on the value of editRowEnable then you will be able to select row or not.

Demo

$(document).ready(function() {
  var editRowEnable = false;

  function populateInputFields() {
    var currentRow = $("#myTable tr.highlighted");
    var input1 = $("#input1").val(currentRow.find("td:eq(0)").text());
    var input2 = $("#input2").val(currentRow.find("td:eq(1)").text());
    var input3 = $("#input3").val(currentRow.find("td:eq(2)").text());
  }

  function isRowHighlighted() {
    if (!$('input').val()) {
      alert("Please click a row.");
    } else {
      editEnableDisable();
      input1;
      input2;
      input3;
    }
  }

  function editEnableDisable() {
    $("#input1").prop('disabled', false);
    $("#input2").prop('disabled', false);
    $("#input3").prop('disabled', false);
    $("#edit").prop('disabled', true);
    $("#save").prop('disabled', false);
    $("#cancel").prop('disabled', false);
  }

  function saveCancelEnableDisable() {
    $("#input1").prop('disabled', true);
    $("#input2").prop('disabled', true);
    $("#input3").prop('disabled', true);
    $("#edit").prop('disabled', false);
    $("#save").prop('disabled', true);
    $("#cancel").prop('disabled', true);
  }

  function successDialogBox() {
    $("p").text("Case has been updated");
    $("#dialogBox").dialog();
  }

  function updateGridData() {
    enableTableSelection();
    var currentRow = $("#myTable tr.highlighted");
    currentRow.find("td:eq(0)").text($("#input1").val());
    currentRow.find("td:eq(1)").text($("#input2").val());
    currentRow.find("td:eq(2)").text($("#input3").val());

  }

  function revertChanges() {
    var currentRow = $("#myTable tr.highlighted");
    var previous1 = currentRow.find("td:eq(0)").text()
    var previous2 = currentRow.find("td:eq(1)").text()
    var previous3 = currentRow.find("td:eq(2)").text()


    $("#input1").val(previous1);
    $("#input2").val(previous2);
    $("#input3").val(previous3);

  }
  ///ENABLE OR DISABLE CLICK ON TABLE ROWS
  function disableTableSelection() {
    $("#recentCasesTable tr").off('click');
  }

  function enableTableSelection() {
    $("#recentCasesTable tr").on('click');
  }

  $('#myTable tr').click(function() {
    if (!editRowEnable) {
      $('#myTable tr').removeClass('highlighted');
      $(this).addClass('highlighted');
      populateInputFields();
    }
  });

  $("#edit").click(function() {
    editRowEnable = true;
    disableTableSelection(); //This Function is not working
    isRowHighlighted();
  });

  $("#save").click(function() {
    editRowEnable = false;
    enableTableSelection(); //This Function is not working
    updateGridData()
    saveCancelEnableDisable()
    successDialogBox();
  });

  $("#cancel").click(function() {
    editRowEnable = false;
    enableTableSelection(); //This Function is not working
    revertChanges();
    saveCancelEnableDisable();

  });
});

#myTable {
  border-collapse: collapse;
  width: 50%;
  border: 1px solid #ddd;
  padding: 2px;
}

#myTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
}

#myTable td,
th {
  border: 1px solid #ddd;
  padding: 8px;
}

#myTable tr:nth-child(even) {
  background-color: #D8D8D8;
}

#myTable tr.highlighted td {
  background-color: #5c715e;
}

#caseDetailsContainer {
  border-style: solid;
}

fieldset {
  border: 1px solid #04AA6D;
  border-width: thin;
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>TABLE ENABLE DISABLE SELECTION</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="Scripts/script.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
  <link type="text/css" rel="stylesheet" href="https:/resources/demos/style.css" />
  <link type="text/css" href="Style/style.css" rel="stylesheet" />
  <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
  <link type="text/css" rel="stylesheet" href="https:/resources/demos/style.css" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

</head>

<body>

  <table id="myTable">
    <tr>
      <th>TH 1&nbsp</th>
      <th>TH 2&nbsp</th>
      <th>TH 3&nbsp</th>

    </tr>
    <tr>
      <td>R1&nbsp</td>
      <td>R1&nbsp</td>
      <td>R1&nbsp</td>

    </tr>
    <tr>
      <td>R2&nbsp</td>
      <td>R2&nbsp</td>
      <td>R2&nbsp</td>
    </tr>

    <tr>
      <td>R3&nbsp</td>
      <td>R3&nbsp</td>
      <td>R3&nbsp</td>
    </tr>
  </table>

  <fieldset>
    <legend><b>Input Fields</b></legend>
    <table id="caseDetails">
      <tr>
        <td>Department Case #</td>
        <td><input type="text" id="input1" name="input1#" disabled="disabled" / value="" /></td>
      </tr>
      <tr>
        <td>Department</td>
        <td><input type="text" id="input2" name="input2" disabled="disabled" value="" /></td>
      </tr>
      <tr>
        <td>Charge</td>
        <td><input type="text" id="input3" name="input3" disabled="disabled" value="" /></td>
      </tr>
    </table>
    <br/>
    <button id="edit" name="edit" type="submit" value="edit">Edit</button>
    <button id="save" name="save" type="submit" value="save" disabled="disabled">Save</button>
    <button id="cancel" name="cancel" type="submit" value="cancel" disabled="disabled">Cancel</button>
  </fieldset>

  <div id="dialogBox">
    <p>
    </p>
  </div>


</body>

</html>