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

Question

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

注意复选框的形式：

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

如果用户select这个，我有下面jquery来禁用字段

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

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

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

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

但是没有 .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/

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

Determine checked box status on page load, disable closest input if checked

jquery

checkbox

toggle