确定页面加载时的复选框状态，如果选中则禁用最近的输入

Question

我有一个提示用户输入的表单，但是每个字段都有一个“不可用”复选框，以防数据不可用。

注意复选框的格式为：

<input id="un_123" class="unavailable" type="checkbox" name="un_123" value="unavailable">

如果用户选择此项，我有以下 jquery 来禁用该字段

  $(document).ready(function(){
    $('.unavailable').change(function() {
        var i = $(this).prev('input'),
            d = i.attr('disabled');
            i.attr('disabled', !d);
            i.val('Unavailable');
    });
});

使用复选框将字段切换为禁用。

但是，当页面加载时，复选框的状态被保留（如果选中，则将其记录在表格中并在页面加载时引用以将其加载为选中或未选中，但是该字段显然加载为未禁用。

我在一个页面上有多个这些字段/复选框配对的实例，因此我希望能够检查已加载的页面加载，然后禁用最接近它们的字段。

但如果没有 .change 触发器并依赖 this，我不确定如何继续？

我试过了：

  $(document).ready(function(){ 
      if($('.unavailable').is(':checked')){
        var i = $('.unavailable').prev('input'),
            d = i.attr('disabled');
            i.attr('disabled', !d);
            i.val('Unavailable');   
     }
});

但它不起作用（页面加载时禁用复选框旁边的所有输入）

Answer 1

试试这个：

$(document).ready(function(){

    $('input.unavailable').change(function() {
                    var i = $(this).parent().prev('input'),
                            d = i.attr('disabled');
                            i.attr('disabled', !d);
                            i.val('Unavailable');
            });
    $('input.unavailable:checked').each(function(){
        var i = $(this).parent().prev('input');
        i.prop('disabled', true);
        i.val('Unavailable');});

});

http://jsfiddle.net/Lfjj8LrL/