Disable input box using jquery

[LinusIT]

Hi

I'm trying to recreate an intranet system that I had until my entire world was stolen. I've been hunting around the forums finding my old threads to help me get going.

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form>
<tr>
<td><input type="text" class="w140" id="ref" name="ref" value="" /></td>
<td><input type="text" class="w80" id="in" name="in" value="" /></td>
<td><input type="text" class="w80" id="out" name="out" value="" /></td>
<td><input type="text" class="w140" id="detail" name="detail" value="" /></td>
</tr>
</form>
</table>

Jquery:

<script type="text/javascript">
$(document).ready(function() {
$("#in").blur(function() {
if ($(this).val() !== '')
$("#out").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#out").attr("disabled", "").css({ "border": "1px solid #888" });
});
$("#out").blur(function() {
if ($(this).val() !== '')
$("#in").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#in").attr("disabled", "").css({ "border": "1px solid #888" });
});
});
</script>

Here's what used to happen. If you typed a value into "In" then "Out" became disabled and vice versa. DW is telling me I have a coding error where it's highlighted in bold but I can't see it.

Please help, it's driving me mad as I know it used to work (obviously the fixed version).

Thanks

[Dijkgraaf]

You are missing a } before the first else and also a { after it.

<script type="text/javascript">
$(document).ready(function() {
$("#in").blur(function() {
if ($(this).val() !== '')
$("#out").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
}
else
{
$("#out").attr("disabled", "").css({ "border": "1px solid #888" });
});
$("#out").blur(function() {
if ($(this).val() !== '')
$("#in").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#in").attr("disabled", "").css({ "border": "1px solid #888" });
});
});
</script>

[Fotiman]

@Dijkgraaf, no, he's not. There is no opening { of the if. Here's the original code, but formatted to make it easier to read:

$(document).ready(function() { 
  $("#in").blur(function() { 
    if ($(this).val() !== '') 
      $("#out").attr("disabled", "disabled").css({ "border": "1px solid #CCC" }); 
    else 
      $("#out").attr("disabled", "").css({ "border": "1px solid #888" }); 
  }); 
  $("#out").blur(function() { 
    if ($(this).val() !== '') 
      $("#in").attr("disabled", "disabled").css({ "border": "1px solid #CCC" }); 
    else 
      $("#in").attr("disabled", "").css({ "border": "1px solid #888" }); 
  }); 
}); 

[Fotiman]

With that said, "in" is a reserved word in JavaScript, so I would not use that as an ID value, and I wonder if that might be what's causing you problems.