JQuery "greying" out textfield in form

Question

I have the following function, but it does not blur out when the radio button is selected to no. Any ideas why?

Form Element:

<td>
    Email: Yes? <input type="radio" name="emailquest" value="true" checked>
    No? <input type="radio" name="emailquest" value="false">
</td>
<td>
    <input type="text" name="email">
</td>

Script:

<script>
    $(document).ready(function(){
        $("#emailquest").blur(function(){
            if ($(this).val() != true)
                $("#email").attr("disabled","disabled");
            else
                $("#email").removeAttr("disabled");
        });
    });                     
</script>

The `#` is used in a selector to select elements by **id**, not by name. — Pointy, May 02 '13 at 19:21
What version of jQuery are you using? (http://stackoverflow.com/questions/5874652/prop-vs-attr) — Kevin B, May 02 '13 at 19:22
It may also be better to change `$(this).val() != true` to `$(this).is(':checked')` — naththedeveloper, May 02 '13 at 19:23
`.attr()` is deprecated. Use `prop()`. http://api.jquery.com/prop/ — Elavarasan Muthuvalavan - Lee, May 02 '13 at 19:24
@Intelwalk Then you'll want to be using `.prop` to change the disabled property. — Kevin B, May 02 '13 at 19:24
@elavarasanlee `.attr()` is **NOT** depreciated, it just doesn't update properties anymore. — Kevin B, May 02 '13 at 19:24
@KevinB Well, it still does, but only because changing an attribute does change the property (not the other way around). Or did jQuery somehow prevent that? — Ian, May 02 '13 at 19:31
@Ian jQuery changed that in 1.6, then reverted it in 1.6.1, and then changed it back to the way it was in 1.6 in 1.9. See the second comment for a link to an explanation. — Kevin B, May 02 '13 at 19:38
@KevinB: I read that from from some post in stackoverflow oly. Anyways I just re-confirmed that `.attr()` is not deprecated yet. Thank you. — Elavarasan Muthuvalavan - Lee, May 02 '13 at 19:44
@KevinB My point is that setting an attribute has always propagated to setting the property, no matter the version of jQuery...just letting setting an attribute with `setAttribute()` always results in setting the property. The result of getting an attribute or property with `attr` or `prop` may have changed throughout versions though. I just tested with 1.6, 1.6.1, and 1.9.1 — Ian, May 02 '13 at 20:15
@Ian Not always. http://jsfiddle.net/5WDXS/ It is true with the disabled property though. Whether or not they automatically propagate depends on browser and attribute i think. I don't think jQuery is doing it. — Kevin B, May 02 '13 at 20:40

score 6 · Accepted Answer · answered May 02 '13 at 19:24

6

As Pointy said, # is used for ID's, not names

$("input[name='emailquest']").change(function(){
    if (this.value != "true") { // <----I would probably change this to look for this.checked
        $("input[name='email']").prop("disabled", true);
    } else {
        $("input[name='email']").prop("disabled", false);
    }
});

Live demo: http://jsfiddle.net/E3zDB/

Shortened version using a ternary operator:

$("input[name='emailquest']").change(function(){
    var input = $("input[name='email']");
    this.value != "true" ? input.prop("disabled", true) : input.prop("disabled", false);
});

answered May 02 '13 at 19:24

tymeJV

103,943
14
161
157

You could use the `!=` comparison as the second argument to `.prop()` and get rid of the `if` statement :-) – Pointy May 02 '13 at 19:33
for checkboxes `:checked` makes sense, but in this case he needs to discern the value of what is checked, not whether its checked...since you cant uncheck a radio button, the value is more important – anson May 02 '13 at 19:34
@tymeJV Thanks for the help! Worked great! +1 – Intelwalk May 02 '13 at 21:06

JQuery "greying" out textfield in form

1 Answers1