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

时间:2015-04-03 00:14:05

标签: jquery checkbox toggle

我有一个表单会提示用户输入,但是每个字段都有一个'不可用'复选框,因为数据不可用。

请注意,复选框的格式为:

<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');   
     }
});

但它不起作用(页面加载了禁用复选框旁边的所有输入)

1 个答案:

答案 0 :(得分: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/