Question

I am using the following jquery in order to disable text boxes on my page. The issue I am running into is that by default because its stored in the database it loads the page with “remote_server” set to 0. Even with this being set automatically the fields are still able to be modified. I must click on the selection drop down and reselect “no” for it to work.

Here is my JS

var e = document.getElementsByName("remote_server")[0]
var strUser = e.options[e.selectedIndex].value;

if ( strUser == 0 ) {

$('select[name=remote_server]').change(function(){
var inputs = $('input[name^=ftp_],select[name^=ftp_]');
$(this).val() == "0" ? inputs.attr("disabled", "disabled") : inputs.removeAttr("disabled");
});
}

My remote_server HTML code for the drop down selection.

<select name="remote_server" class="required">
<option></option>
<option value="1" <?php if($remote=="1") echo 'selected="selected"'; ?>>Yes</option>
<option value="0" <?php if($remote=="0") echo 'selected="selected"'; ?>>No</option>
</select>

Loading the page I an see where the option 0 is selected aswell which is why this puzzles me

<select name="remote_server" class="required">
<option></option>
<option value="1" >Yes</option>
<option value="0" selected="selected">No</option>
</select>

Answer 1

You should trigger the change event:

$('select[name=remote_server]').change(function(){
   var inputs = $('input[name^=ftp_],select[name^=ftp_]');
   $(this).val() == "0" 
   ? inputs.attr("disabled", "disabled") 
   : inputs.removeAttr("disabled");
}).change() // trigger the event

Note that as of jQuery 1.6 for setting/getting properties of the elements, prop method should be used instead of attr:

var $inputs = $('input[name^=ftp_],select[name^=ftp_]');

$('select[name=remote_server]').change(function(){
     $inputs.prop('disabled', this.value === 0)
}).change();