Javascript 使用jquery禁用表单元素

我试图在单击复选框后使用jquery禁用表单元素，但它似乎不起作用。有人能看出哪里出了问题吗

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

这里有一个指向JSFIDLE的链接

---

属性选择器应如下所示

您可以将其简化如下

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

---

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

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

试试这个（用道具代替属性）

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

您在名称选择器中有一个错误。需要使用：

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

---

我明白了。

<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>

克
盎司
英镑

附加时间
按部分数量成比例增加数量
$（'#全局'）。更改（函数（）{
如果（$（this）.is（“：checked”））{
$（'input[name=addedQuantity]'）。attr（'disabled'，true）；
}否则{
输入。removeAttr（“禁用”）；
}
});

另外，您的小提琴没有jQuery框架使用.prop（'disabled'，true）/.prop（'disabled'，false）代替attr/removeAttr。还有[name=“globallyAddTime”]作为输入复选框。对于jQuery 1.6+，顺便使用

prop

代替

attr

。也许您可以避免在输入名称中使用

[]

。反正也不会伤害你^_^

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

<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>