Question 37161 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Is there a way to enable the disabled input field once clicked on mouse? – Jquery

I am trying to enable input field using mouse click, is there a way to achieve it?

Here’s what my interface looked like:

Note: It is required to disable first input fields and by clicked specific input text then it should be enabled.

enter image description here

I would like to enable once specific input field is clicked.

<?php foreach($grades as $grade): ?>
    <td> <input type="text" class="form-control" value="<?php echo $grade['grade'] ?>" id="gradeid" disabled></td>
<?php endforeach; ?>

Script:

<script>
    const inputField = document.getElementById('gradeid');
    inputField.onfocus = () => {
        $('#gradeid').attr('disabled', 'disabled''');
    };
</script>
Tags:

2

Answers


  1. 0

    onclick and onfocus events won’t work when the button is disabled. However, you can add the event to the element that holds it.

    For example, here is the HTML:

    <table>
    <tr>
        <td onclick = "tdclicked(this)"> 
            <input type="text" class="form-control" value="<?php echo $grade['grade'] ?>" id="gradeid1" disabled>
        </td>
        <td onclick = "tdclicked(this)"> 
            <input type="text" class="form-control" value="<?php echo $grade['grade'] ?>" id="gradeid2" disabled>
        </td>
        <td onclick = "tdclicked(this)"> 
            <input type="text" class="form-control" value="<?php echo $grade['grade'] ?>" id="gradeid3" disabled>
        </td>
    </tr>
</table>

    and here’s the Javascript.

    function tdclicked(td) {
    for (var i = 0; i < document.getElementsByClassName("form-control").length; i++) {
        document.getElementsByClassName("form-control")[i].setAttribute("disabled", "true");
    }
    inputField = td.children[0];
    inputField.removeAttribute("disabled");
}
    Login or Signup to reply.
  2. 0

    The browsers disable events on disabled elements. and when you to perform something on multiple fields you must class elements or dynamic id elements.
    here is working demo hope this will help you to understand,

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
 
function buttonclicked(e) {
$('.gradeid').attr('disabled', 'true');
    $(e).children("input").removeAttr("disabled");
}
</script>
</head>
<body>
<table>
    <tr>
        <td onclick = "buttonclicked(this)"> 
            <input type="text" class="form-control gradeid" value="0" id="gradeid" disabled>
        </td>
    </tr>
    <tr>
        <td onclick = "buttonclicked(this)"> 
            <input type="text" class="form-control gradeid" value="0" id="gradeid" disabled>
        </td>
    </tr>
      <tr>
        <td onclick = "buttonclicked(this)"> 
            <input type="text" class="form-control gradeid" value="0" id="gradeid" disabled>
        </td>
    </tr>
    <tr>
        <td onclick = "buttonclicked(this)"> 
            <input type="text" class="form-control gradeid" value="0" id="gradeid" disabled>
        </td>
    </tr>
</table
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search