There are a couple of things wrong in this code:
- You're using
<input>
the wrong way. You should use a <label>
if you want to make the text behind it clickable.
- It's setting the
enabled
attribute, which does not exist. Use disabled
instead.
- If it would be an attribute, it's value should not be
false
, use disabled="disabled"
or simply disabled
without a value.
- If checking for someone clicking on a form event that will CHANGE it's value (like check-boxes and radio-buttons), use
.change()
instead.
I'm not sure what your code is supposed to do. My guess is that you want to disable the input field with class roomNumber
once someone selects "Walk in" (and possibly re-enable when deselected). If so, try this code:
HTML:
<form class="type">
<p>
<input type="radio" name="type" checked="checked" id="guest" value="guest" />
<label for="guest">In House</label>
</p>
<p>
<input type="radio" name="type" id="walk_in" value="walk_in" />
<label for="walk_in">Walk in</label>
</p>
<p>
<input type="text" name="roomnumber" class="roomNumber" value="12345" />
</p>
</form>
Javascript:
$("form input:radio").change(function () {
if ($(this).val() == "walk_in") {
// Disable your roomnumber element here
$('.roomNumber').attr('disabled', 'disabled');
} else {
// Re-enable here I guess
$('.roomNumber').removeAttr('disabled');
}
});
I created a fiddle here: http://jsfiddle.net/k28xd/1/
OnChange
isn't a thing, it'schange
. Also, why not usefocus
?if
statement: jsfiddle.net/6UZKN/1.removeAttr('enabled')
to be sure. Not all browsers supportenabled="false"
..attr
..removeAttr
would work, but.prop
would work fine as well.