Cannot get disable button to work.

Question

Hey guys, quick question, I have this javascript/jquery function that basically wraps an input in image brackets, and the first part of the function works, but the button does not disable after and I cannot figure out why (last line does not work). If anyone has an idea, let me know. Thanks in advance.

<input id="2image" type="button" value="Attach" onclick="imageid('message')">

<script>
    function imageid(input) {
        var obj=document.getElementById(input);
        obj.value+="[image]image[/image]";

        $("#2image").attr({ disabled:true, value:"Inserted" });
    }
</script>

Answer 1

Try setting $("elements").attr('disabled', 'disabled');

Answer 2

You need to set the disabled attribute to "disabled", not to true, and I personally prefer using .val() to set values.

$("#2image").attr('disabled', 'disabled').val('Inserted');

A couple of observations:

The last line is jQuery, while the preceding lines are vanilla JavaScript. Are you sure you're including the jQuery in your page via a <script type="text/javascript" src="jquery-1.4.2.js"></script> tag?

If you are indeed including jQuery, you should consider replacing your getElementById call with the jQuery operator ($('#' + input), or just $(input) if you modify to calling code to prepend the #):

$(input).val($(input).val() + '[image]image[/image]');

Answer 3

You may just be stumbling about this trivial limitation:

http://www.w3.org/TR/html401/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

I.e. id="2image" is invalid.

Answer 4

Just access the DOMElement and change it via vanilla javascript:

$("#2image").val("Inserted").get(0).disabled = true;

$('input[value="Inserted"]').get(0).disabled = true;

I just ran this in the Javascript Console in Google Chrome to change the Add Comment button to disable and display "Gotcha!"