Is there a way to enable the disabled input field once clicked on mouse? [duplicate]

Question

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.

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>

@Mohammednaji - I need to enable the input field once I clicked it, but by default the input fields are required to be disabled — Coder Codes
– Coder Codes, Commented Aug 12, 2022 at 5:40

Dustcloth · Accepted Answer · 2022-08-12 07:05:34Z

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"); }

@ViolinFour- hello, it somehow works, but it only enables the very first row/input field. If I clicked on next or more rows then it does not enable specific input text. Is there a way to resolve this please?
@CoderCodes: Make sure that you're using the right id in buttonclicked. buttonclicked as is will only enable the input field with the id "gradeid".
id is correct, sir. But the input text field is on loop that is why it only enables the first input text. I have updated my question. The id is always 1
Try passing the td element and using the children property. I've edited my answer.
It's best to give elements unique ids. document.getElementById will probably only return the first occurence of that id.

Neeraj · Accepted Answer · 2022-08-12 06:27:54Z

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>

this is what I'm looking for, is there a way to disable previous input field when I click on another input field?
means you want to disable all input fields except you click or only previous input you click?

Collectives™ on Stack Overflow

Is there a way to enable the disabled input field once clicked on mouse? [duplicate]

2 Answers 2

9 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Linked

Related