每次页面加载后，必须重新选择表单上的 jquery select 才能工作

Question

我正在使用以下 jquery 来禁用页面上的文本框。我遇到的问题是，默认情况下，因为它存储在数据库中，所以它会加载“remote_server”设置为 0 的页面。即使自动设置了此值，字段仍然可以修改。我必须单击选择下拉菜单并重新选择“否”才能使其正常工作。

这是我的 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");
});
}

我的用于下拉选择的remote_server HTML 代码。

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

加载页面时我看到选项 0 也被选中，这就是为什么这让我困惑

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

Answer 1

您应该触发 change 事件:

$('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

请注意，从 jQuery 1.6 开始，应使用 prop 方法而不是 attr 来设置/获取元素的属性:

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

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