jquery/JavaScript 启用和禁用选择菜单.我做错了什么

jquery/javascript enabling and disabling select menus. What am I doing wrong?

本文关键字：菜单 错了 什么 选择 JavaScript 启用 jquery      更新时间：2023-09-26

这是非常标准的东西，我不明白为什么它不起作用。调用启用函数时，我收到警报，但选择字段仍处于禁用状态。有什么想法吗？

$(window.document).ready(function() {
    $('#selectmenu1').attr('disabled','true');
    $('#selectmenu2').attr('disabled','true');
    $('#selectmenu3').attr('disabled','true');
});
function enableCoreChange(){
    alert('called');
    $('#selectmenu1').attr('disabled','false');
    $('#selectmenu2').attr('disabled','false');
    $('#selectmenu3').attr('disabled','false');
}

点击事件：

<a href="#" onclick="enableCoreChange();">Click here to enable</a>

快把我逼疯了！

传递布尔值，而不是字符串，作为.attr()的第二个参数。

$(function() { // use document ready shorthand
    // combine the selectors to stay DRY
    $('#selectmenu1, #selectmenu2, #selectmenu3').attr('disabled', true);
});
function enableCoreChange() {
    $('#selectmenu1, #selectmenu2, #selectmenu3').attr('disabled', false);
    // alternately:
    $('#selectmenu1, #selectmenu2, #selectmenu3').removeAttr('disabled');
}

请注意其他常规样式改进。

HTML： 

 <a href="#" id="enable">Click here to enable</a>

j查询：

function enableCoreChange(){
    $('#selectmenu1, #selectmenu2, #selectmenu3').prop('disabled', false); 
}
$(document).ready(function(){
    $('#selectmenu1, #selectmenu2, #selectmenu3').prop('disabled', true); 
    $('#enable').on('click',function(e){
        e.preventDefault();
        enableCoreChange();
    });    
});

演示 js小提琴

注意：
代替$('#selectmenu1, #selectmenu2, #selectmenu3')：以^选择器开头：

$('select[id^="selectmenu"]').prop('disabled', false);
属性

"disabled"不需要值（向后兼容性），一旦此属性可用，它就会被禁用。

要再次激活它，请使用此功能：

function enableCoreChange(){
    alert('called');
    $('#selectmenu1').removeAttr('disabled');
    $('#selectmenu2').removeAttr('disabled');
    $('#selectmenu3').removeAttr('disabled');
}
你应该

使用.prop()而不是.attr()

http://api.jquery.com/prop/

这里的问题是你指定了字符串'false'而不是布尔false。 就个人而言，我会使用removeAttr来澄清

function enableCoreChange(){
    alert('called');
    $('#selectmenu1').removeAttr('disabled');
    $('#selectmenu2').removeAttr('disabled');
    $('#selectmenu3').removeAttr('disabled');
}

小提琴：http://jsfiddle.net/6pznn/

相关文章：