禁用基于另一个div的类的输入选项

时间:2013-10-04 19:08:40

标签: javascript jquery html css

我有这种由重力形式的预填充形式生成的HTML:

<ul id="input_4_17" class="gfield_radio">
    <li class="gchoice_17_0">
        <input type="radio" tabindex="1" id="choice_17_0" name="input_17">
        <label for="choice_17_0">
            <img class="stock instock" id="gchoice_17_0">
        </label>
    </li>
    <li class="gchoice_17_1">
        <input type="radio" tabindex="1" id="choice_17_1" name="input_17">
        <label for="choice_17_1">
            <img class="stock outofstock" id="gchoice_17_1">
        </label>
    </li>
    <li class="gchoice_17_2">
        <input type="radio" tabindex="1" id="choice_17_2" name="input_17">
        <label for="choice_17_2">
            <img class="stock outofstock" id="gchoice_17_2">
        </label>
    </li>
</ul>

我正在尝试根据库存状态禁用输入,即img元素的类。我不能把这个类放在输入中,所以我使用这个javascript来禁用基于图像类的输入来禁用输入:

$(document).ready(function () {
    if ($('img#gchoice_17_0').hasClass('outofstock')) {
        $('input#choice_17_0').attr("disabled", "disabled").prop("checked", false);
    }
    if ($('img#gchoice_17_1').hasClass('outofstock')) {
        $('#choice_17_1').attr("disabled", "disabled").prop("checked", false);
    }
    if ($('img#gchoice_17_1').hasClass('outofstock')) {
        $('#choice_17_1').attr("disabled", "disabled").prop("checked", false);
    }
});

这有效,但我知道这不是最好的方法。我正在尝试使用此代码,但它不起作用。

$(document).ready(function () {
    if ($('img').hasClass('outofstock')) {
        var getIde = $(this).attr("id");
        $('input#' + getIde).attr("disabled", "disabled").prop("checked", false);
    }
});

有没有人有任何想法,为什么它不起作用?

3 个答案:

答案 0 :(得分:2)

试试这个:

   $(document).ready(function(){
       $('.outofstock').parent().prev().prop('disabled',true).prop('checked',false);
       });

DEMO.

答案 1 :(得分:1)

你可以试试这个

$('.outofstock').parent().prev('input:radio').prop('disabled', 1)

DEMO.

更新:

$('.outofstock').parent().prev('input:radio').prop({
    'disabled':1,
    'checked':0
});

DEMO.

答案 2 :(得分:0)

试一试......

$( document ).ready( function(){
    $('img').each(function(index){
        if($(this).hasClass('outofstock')){
            var getIde = $(this).attr('id');
            $('#'+getIde).attr('disabled', 'disabled').prop('checked', false);
        }
    });
});