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

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, Aug 12 '22 at 05:40

ViolinFour · Accepted Answer · 2022-08-12T07:05:34.940

2

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

edited Aug 12 '22 at 07:05

answered Aug 12 '22 at 06:05

ViolinFour

74
3

@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? – Coder Codes Aug 12 '22 at 06:08
@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". – ViolinFour Aug 12 '22 at 06:11
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 – Coder Codes Aug 12 '22 at 06:13
Try passing the td element and using the children property. I've edited my answer. – ViolinFour Aug 12 '22 at 06:19
It's best to give elements unique ids. document.getElementById will probably only return the first occurence of that id. – ViolinFour Aug 12 '22 at 06:25
@CoderCodes, to disable the other elements when you enable one, loop through all the input fields using getElementsByTagName and disable them all. Then, enable the one you want to use. – ViolinFour Aug 12 '22 at 06:55
do I need to use condition for this, sir? – Coder Codes Aug 12 '22 at 06:57
is there a way to do it on your code for my reference please? – Coder Codes Aug 12 '22 at 06:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247215/discussion-between-violinfour-and-coder-codes). – ViolinFour Aug 12 '22 at 07:05

score 1 · Answer 2 · answered Aug 12 '22 at 06:27

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? — Coder Codes, Aug 12 '22 at 06:50
means you want to disable all input fields except you click or only previous input you click? — Neeraj, Aug 12 '22 at 07:24

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

2 Answers2