0

I have a form as follows:

<form>
<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock" onMouseDown="toggleInput()"></button>
</form>

And javascript code:

function toggleInput(){
    if ($("#input").disabled){
        $("#input").disabled = false;
    }
    else {
        $("#input").disabled = true;
    };
}

What I basically want to do is to check what state (enabled/disabled) the textbox is in, and then toggle the state accordingly. I don't know if the javascript portion even uses the correct syntax to check if the textbox is disabled, but it's what I could think of.

Thanks in advance!

EDIT: Reason as to why I've chosen to use onmousedown instead of onclick to execute the event with the button:

I have chosen to use onmousedown instead of onclick as it makes the app I'm building feel less clunky due to the presence of this feature with onclick: When you click on a button and then drag the cursor away from the button while holding the mouse button down, and subsequently lift your finger off the mouse button when the cursor is in an area away from the button on the webpage, the event will not be executed. Hence, I've chosen to use onmousedown as this is overcome.

Improve this question
1
  • It should be $("#input")[0].disabled not $("#input").disabled.. Commented Dec 6, 2013 at 12:22

3 Answers 3

Reset to default
2

Use .prop(), Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element

 $("#input").prop('disabled',!$("#input").prop('disabled'))

DEMO

I am not sure why you are using onMouseDown. Use click instead

$("#lock").on("click", function() {
    $("#input").prop('disabled',!$("#input").prop('disabled'))
});

DEMO with click

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

1 Comment

+1 : Nice solution. you just one step ahead then @nnnnnn by providing demo
1

To do it with jQuery try this:

$("#input").prop("disabled", function(i, v) { return !v; });

Your existing code doesn't work because DOM elements have a .disabled property, but jQuery objects do not.

I'm not sure why you're using onmousedown instead of onclick for the button, but either way if you're going to use jQuery I'd recommend removing the inline event attribute in favour of binding the handler with jQuery:

$("#lock").on("click", function() {
    $("#input").prop("disabled", function(i, v) { return !v; });
});

(You'd need to include that code either in a script block at the end of the body or in a document ready handler.)

Demo: http://jsfiddle.net/a7f8v/

Improve this answer

4 Comments

Thanks, but onmousedown registers a more instantaneous response, right?
Well yes, the click event happens after both mousedown and mouseup on the same element, so mousedown is more instantaneous but also not normal button behaviour. Normal behaviour for buttons is to do something in response to click, not to mousedown. In any case if you feel you must have mousedown, the only thing you need to change from my answer is to replace "click" with "mousedown" - as shown here: jsfiddle.net/a7f8v/1
Side note - I have chosen to use onmousedown instead of onclick as it makes the app I'm building feel less clunky due to the presence of this feature with onclick: When you click on a button and then drag the cursor away from the button while holding the mouse button down, and subsequently lift your finger off the mouse button when the cursor is in an area away from the button on the webpage, the event will not be executed. Hence, I've chosen to use onmousedown.
The behaviour you describe with dragging the mouse off the button is correct click behaviour for buttons - both html buttons and non-web-page application buttons such as your browser's minimise button. It's also correct behaviour for clicks on links, and it's what most users would expect given that it has been standard behaviour for several decades. Of course you are free to ignore what is standard and do your own thing...
0

You should append the event handler with jQuery instead of an onMouseDown event. The syntax could look like this:

<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock"></button>

JavaScript:

$(document).ready(function() {
    $("#lock").click(function() {
        var input = $("#input");
        input.prop('disabled',!input.is(':disabled'))
    });
});

Example

Improve this answer

5 Comments

What are the drawbacks/benefits by appending the event handler with jQuery rather than onMouseDown?
Why input.is(':disabled') rather than input.prop('disabled')?
@user3030521 - Appending event handlers with jQuery has multiple advantages - for example, you can unbind the event handler easily after attaching it. You can also attach the event handler to multiple elements.
@nnnnnn, you are right, this works also. But is there an advantage for using prop in this specific case?
I imagine .prop() is more efficient, though I admit I've not waded through the jQuery source to check. But to my way of thinking it seems more consistent to use .prop() to get the property value given that you're already using .prop() to set the property value. But yes, either works and probably I shouldn't have even brought it up. (Having said all that, you can achieve the same result with a single call to .prop() and no call to .is() as shown in my answer.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.