Question

我试图使用jquery一旦单击一个复选框就禁用表单元素，但它似乎没有工作。谁能看到什么错了？

$('name="globallyAddTime"').click(function() {
if ($(this).attr('checked')) {
       $('name="addedQuantity[]"').attr('disabled', true);
    } else {
        $('name="addedQuantity[]"').removeAttr('disabled');
    }
});

这是jsfiddle

的链接

http://jsfiddle.net/pocockn/bwmv7/4/

Answer 1

属性选择器应该与此[attr=value]

类似

$('[name="globallyAddTime"]').change(function() {
if ($(this).prop('checked')) {
       $('[name="addedQuantity[]"]').attr('disabled', true);
    } else {
        $('[name="addedQuantity[]"]').removeAttr('disabled');
    }
});

Fiddle Demo

您可以将其简化如下

$('[name="globallyAddTime"]').change(function() {
     $('[name="addedQuantity[]"]').prop('disabled', this.checked);
});

Fiddle Demo

Answer 2

试试这个（使用prop而不是attr）

$('name="globallyAddTime"').click(function() {
if ($(this).prop('checked')) {
       $('[name="addedQuantity[]"]').attr('disabled', true);
    } else {
        $('[name="addedQuantity[]"]').removeAttr('disabled');
    }
});

attr不会返回复选框的当前状态。

您在名称选择器中有错误。需要[name="addedQuantity[]"]

Answer 3

选择属性时，必须使用[]：

$('[name="globallyAddTime"]').click(function() {
    if ($(this).attr('checked')) {
        $('[name="addedQuantity[]"]').attr('disabled', true);
    } else {
        $('[name="addedQuantity[]"]').removeAttr('disabled');
    }
});

Answer 4

使用：

$('[name="globallyAddTime"]').click(function() {
     if ($(this).prop('checked')) {
         $('#addedQuantiy_1').attr('disabled', true);
     } else {
         $('#addedQuantiy_1').removeAttr('disabled');
     }
 });

<强> Working Fiddle

Answer 5

我明白了。

<div id="addIngredient">
                        <p>
                            <input type="text" id="ingredient_1" name="ingredient[]" value="" placeholder="Ingredient" />
                            <input type="text" id="quantity_1" name="quantity[]" value="" placeholder="Quantity" />
                            <select id="selectQuantity_1" name="quantityType[]">
                                <option value="grams">Grams</option>
                                <option value="ounces">Ounces</option>
                                <option value="Pounds">Pounds</option>
                            </select>
                            <input type="text" id="alternative_1" name="alternative[]" value="" placeholder="Alternative Ingredient" />
                            <input type="text" id="addedQuantiy_1" name="addedQuantity" value="" placeholder="Quantity per extra person" />

                            <a href="#" id="addNewIngredient">Add Ingredient</a>
                        </p>
                    </div>


<h2>Added Time</h2>
                     <input type="checkbox" name="globallyAddTime" id="global" value="Global" />
                    <label>Increase Quantites Proportionally to Portion Number</label>
                </div>



<script type="text/javascript" src="script/jquery-1.11.0.min.js"></script>
<script>
$('#global').change(function() {
        if($(this).is(":checked")) {
           $('input[name=addedQuantity]').attr('disabled', true);
    } else {
        inputs.removeAttr('disabled');
    }
    });
</script>

使用jquery禁用表单元素

5 个答案: