Disable input based on another

[LinusIT]

Hi

I've searched for an answer but no results help in what I'd like to do.

I have a form with 4 input fields! Two are "in" and "out", if "In" has an input then I want to disable the "out" field and vice versa.

Here's the form code:

<td><input type="text" class="w140" id="reference" name="reference" 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="receipt" name="receipt" value="" /></td>

Is this possible using JQuery or Javascript?

Thanks

[daveVk]

function check( id1, id2 ) {
document.getElementById( id2 ).disabled = ( document.getElementById( id1 ).value === '' );
}

need to be executed on onchange and onkeyup

eg

... id="in" onchange="check('in','out')" ...

[LinusIT]

I've tried this and it doesn't work. Any ideas?

[LinusIT]

I've got a working solution using JQuery, here's the code incase anyone is interested.

<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>