Disabled Text Input with on button click

Question

With the code shown below, I would like to disable the text input when the user clicks on the button.

When I click on my button, the text input only disables for one second, before it enables again.

I would like to know why does this happens.

<html>

<head>
    <script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#enable').click(function() {
                $('#textBox').removeAttr("disabled")
            });
            $('#disable').click(function() {
                $('#textBox').attr("disabled", "disabled");
            });
        });
    </script>
</head>

<body>
    <form>
        <input type="text" id="textBox" />
        <button id="enable">Enable</button>
        <button id="disable">Disable</button>
    </form>
</body>

</html>

It works fine in a fiddle: jsfiddle.net/v6oxd4zp. Can you set up a working example of the problem. There's nothing in your code which would cause a change in DOM state after a timed interval. — Rory McCrossan
– Rory McCrossan, Commented Apr 21, 2015 at 16:24
@RoryMcCrossan - you forgot the form element -> jsfiddle.net/adeneo/v6oxd4zp/1 — adeneo
– adeneo, Commented Apr 21, 2015 at 16:27
@adeneo yep, you're right. Let this be a lesson to everyone - indent your code! — Rory McCrossan
– Rory McCrossan, Commented Apr 21, 2015 at 16:28

adeneo · Accepted Answer · 2015-04-21 16:25:49Z

3

A button inside a form submits the form, reloading the page, as it's default type is submit.

You have to either change the type

<input type="button" id="enable" value="Enable">

or prevent the default

$('#enable').click(function (e) {
    e.preventDefault();
    $('#textBox').prop("disabled", false);
});
$('#disable').click(function (e) {
    e.preventDefault();
    $('#textBox').prop("disabled", true);
});

And use prop() for the disabled property.

answered Apr 21, 2015 at 16:25

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disabled Text Input with on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related