Question

我编写了下面的函数，以获得ID为listbox的{{1}}的长度。问题是，当我评论courselessons时，函数alert()只能运行一次。

如果删除changecheckbox，则可以正常使用。但我不希望每次点击都有警报。

alert仅首次显示正确的内容。

的JavaScript：

selOpts

HTML：

function changecheckbox() {
   //alert("function called...");
   var selOpts = document.getElementById("courselessons").length();
   alert(selOpts);
   if (selOpts > 0) {
       $('#taskassignment').prop('disabled', false);
   }
   else {
       $('#taskassignment').prop('disabled', true).prop("checked", false);
   }
}

function addItem() {
   if (seltask == undefined || seltask.length === 0) {
       return;
   }
   var lessonsDropdown = $('#courselessons');
   lessonsDropdown.empty();
   $("#tasks option:selected").appendTo("#coursetasks");
   $("#coursetasks option").attr("selected", false);
   if (seltask.length > 0) {
       cacheToken = new Date().getTime();
       // retrieve data using a Url.Action() to construct url
       $.getJSON('@Url.Action("AddTaskToCourse")', {
           task: seltask,
           lesson: lesson,
           _: cacheToken
       });
       $.getJSON('@Url.Action("UpdateLessonInCourse")', {
           _: cacheToken
       }).done(function (data) {
           //re-enable tasks drop down
           //for each returned tasks
           $.each(data, function (i, lessons) {
               //Create new option
               var test = $('<option />').html(lessons);
               //append tasks taskss drop down
               lessonsDropdown.append(test);
           });
           seltask = null;
       });
    }
    changecheckbox();
}

Answer 1

尝试使用这样的，

function changecheckbox() {
    //alert("function called...");
    var selOpts = $("courselessons").find('option').length;

    if (selOpts > 0) {
        $('#taskassignment').prop('disabled', false);
    }
    else {
        $('#taskassignment').prop({'disabled':true, 'checked':false});
    }
}

或者你可以这样做，

$("#btnAdd").click(function(e){
  e.preventDefault();

 var selOpts = $("#courselessons").find('option').length;

    if (selOpts > 0) {
        $('#taskassignment').prop('disabled', false);
    }
    else {
        $('#taskassignment').prop({'disabled':true, 'checked':false});
    }

});

Answer 2

删除选项，并选择select <select id="mySelect">示例：

的ID

var selOpts = document.getElementById("mySelect").length;

，您的代码将是

function changecheckbox() {
        //alert("function called...");
        var selOpts = document.getElementById("courselessons").length;
        if (selOpts > 0) {
            $('#taskassignment').prop('disabled', false);
        }
        else {
            $('#taskassignment').prop('disabled', true);
            $("#taskassignment").prop("checked", false);
        }
    }

Answer 3

addItem()内的代码正在向资源GET发出asynchronously个请求。这意味着执行此函数之后的代码将不会等待其执行完成。

当我取消注释警报时，它可以正常工作。

这是因为内置alert()时，它会暂停脚本的执行，直到用户交互为止。这给了时间addItem()需要，一切似乎都有效。

幸运的是，有一些解决方案可以解决这种情况。

Promise.
重新排列代码以使用回调。

在幕后，$.getJSON是使用GET使用ajax进行datatype = 'json'请求的简写，它会返回一个承诺对象，它基本上告诉我请等待亲爱的，我会给你一些可能是成功或失败的东西，但不久之后。

是的，您可以轻松调用done()内的函数。

注意：这些内容已经在网上得到了很好的解释，所以我不会重新发明轮子：）

保持简单......

function addItem() {

    // Rest of the code...

    if (seltask.length > 0) {
        cacheToken = new Date().getTime();
        // retrieve data using a Url.Action() to construct url
        $.getJSON('@Url.Action("AddTaskToCourse")', {
            task: seltask,
            lesson: lesson,
            _: cacheToken
        });
        $.getJSON('@Url.Action("UpdateLessonInCourse")', {
            _: cacheToken
        }).done(function (data) {
            //re-enable tasks drop down
            //for each returned tasks
            $.each(data, function (i, lessons) {
                //Create new option
                var test = $('<option />').html(lessons);
                //append tasks taskss drop down
                lessonsDropdown.append(test);
            });
            seltask = null;
            changecheckbox();
        });

    }        
}

完成此设置后，您应该从按钮changecheckbox()中移除onclick来电，否则会使其执行两次。

如果我添加alert（），为什么我的JavaScript函数不确定地执行？

的JavaScript：

HTML：

3 个答案: