How can I enable and disable textbox using jQuery?

Question

Good day everyone!

In the beginning, all my controls are disabled. When I click Add or New button I want to enable textboxes and Save button except the Edit and Delete button. When I click the Save button I want to disable all the textbox and enable Edit and Delete button where the button click. And when I click the Edit button

I want to enable textbox so I can update my information in my table.

I'm using jQuery. I display all the codes so you can try it.

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <button id="btnAdd">New</button>
  <table id="tblData" border = "1px">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    var id = 1;
    $(function() {
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
      $("#btnAdd").bind("click", Add);
    });

    function Add() {
      $("#tblData tbody").append(
        "<tr>" +
        "<td>" + id + "</td>" + 
        "<td><input type='text'/></td>" +
        "<td><input type='text'/></td>" +
        "<td><input type='text'/></td>" +
        "<td><button class='btnSave'>Save</button><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button></td>" +
        "</tr>");

      $(".btnSave").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
      id++;
    };

    function Save() {

      var par = $(this).parent().parent(); 
      var tdName = par.children("td:nth-child(2)");
      var tdPhone = par.children("td:nth-child(3)");
      var tdEmail = par.children("td:nth-child(4)");
      var tdButtons = par.children("td:nth-child(5)");

      tdName.html(tdName.children("input[type=text]").val());
      tdPhone.html(tdPhone.children("input[type=text]").val());
      tdEmail.html(tdEmail.children("input[type=text]").val());

      tdName.html("<input type='text' id='txtName' value='" + tdName.html() + "'/>");
      tdPhone.html("<input type='text' id='txtPhone' value='" + tdPhone.html() + "'/>");
      tdEmail.html("<input type='text' id='txtEmail' value='" + tdEmail.html() + "'/>");

      $(".btnSave").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
    };

    function Edit() {
      var par = $(this).parent().parent(); 
      var tdName = par.children("td:nth-child(2)");
      var tdPhone = par.children("td:nth-child(3)");
      var tdEmail = par.children("td:nth-child(4)");
      var tdButtons = par.children("td:nth-child(5)");

      tdName.val("<input type='text' id='txtName' value='" + tdName.html() + "'/>");
      tdPhone.val("<input type='text' id='txtPhone' value='" + tdPhone.html() + "'/>");
      tdEmail.val("<input type='text' id='txtEmail' value='" + tdEmail.html() + "'/>");

      $(".btnSave").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
    };

    function Delete() {
      var par = $(this).parent().parent(); 
      par.remove();
      id = 1;
    };
  </script>
</body>
</html>

I think this stackoverflow answer is what you are looking for : https://stackoverflow.com/questions/1648901/disable-textbox-using-jquery — Nilesh Jain, Oct 08 '18 at 11:00
Possible duplicate of [disable textbox using jquery?](https://stackoverflow.com/questions/1648901/disable-textbox-using-jquery) — Karan Shishoo, Oct 08 '18 at 11:03

score 0 · Answer 1 · answered Oct 08 '18 at 11:20

0

welcome to StackOverflow.

To disable textboxes on saving add these lines to end of your Save function

tdName.find("input[type=text]").attr('disabled', 'true') tdPhone.find("input[type=text]").attr('disabled', 'true') tdEmail.find("input[type=text]").attr('disabled', 'true')

And in the same way, to enable them again for editing, add these lines to your Edit function

tdName.find("input[type=text]").removeAttr('disabled') tdPhone.find("input[type=text]").removeAttr('disabled') tdEmail.find("input[type=text]").removeAttr('disabled')

For working, check out this codepen. https://codepen.io/santu-parashetti/pen/GYNGBd?editors=1010#0

answered Oct 08 '18 at 11:20

Santosh

141
1
6

I try the button but didn't work `btnSave.find('button').attr('disabled', 'true')` I want to disable Save button after I clicked it – Rom Almazan Tacmoy Oct 08 '18 at 11:28
You can't use `btnSave.find()..` because here `btnSave` is className and its not correct selector syntax. if you want to use this it should be like $('.btnSave').find()..` And now you can find updated working pen at https://codepen.io/santu-parashetti/pen/GYNGBd – Santosh Oct 09 '18 at 05:22
For jQuery selectors, refer this https://www.w3schools.com/jquery/jquery_ref_selectors.asp – Santosh Oct 09 '18 at 05:51

How can I enable and disable textbox using jQuery?

1 Answers1