使用动态添加的复选框启用/禁用按钮

Enable/Disable button using dynamically added checkbox's

本文关键字:按钮 启用 动态 添加 复选框      更新时间:2023-09-26

我正在处理一个简单的待办事项列表。 目前我有三个按钮(输入Btn,completeBtn,deleteBtn) - 在启动时全部禁用。 第一个 EnterBtn,在使用 jquery 完成表单时启用(工作正常)。 然后当我提交表单时,javascript 会创建一个包含跨度和复选框的

    (也可以正常工作)。 现在,我想在选中任何 NEW 复选框项时启用完整的 Btn。 有人可以帮我弄清楚如何切换我的完整按钮吗? 高潮是使用 completeBtn 在单击任何复选框时启用,然后我计划只删除选中的复选框,但我会自己进入该部分。 我唯一需要的帮助是根据下面的代码找出解决此问题的最佳方法。

    我将在到目前为止我测试过的地方发表评论。

    .HTML

    <input type="text" id="goalId">
    <input id="completeBtn" value="Complete" type="button"   disabled="disabled"/>
    <ul id="log_data"></ul>
    

    JavaScript

    function disableFunction() {
    document.getElementById("enterBtn").disabled = 'true';
    }
    function enableFunction(cbId) {
    //tested here
    }
    function checkSpanStatus() {
    alert("path works");
    } 
    function updateItemStatus() {
    var cbId = this.Id.replace("cb_","");
    var itemText = document.getElementById("item_" + cbId);
    if(this.checked) {
    itemText.style.textDecoration = "line-through";
    //document.getElementById("completeBtn").disabled = 'false'; <tried this>
    enableFunction(); //and this
    }else{
    itemText.style.textDecoration = "none";
    }
    }
    function addNewItem(list, itemText) {
    totalItems++;
    var listItem = document.createElement("ul");
    
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.Id =  "cb_" + totalItems;
    checkbox.onclick = updateItemStatus;
    var span = document.createElement("span");
    span.id = "item_" + totalItems;
    span.onclick = checkSpanStatus;
    span.innerText = itemText;
    listItem.appendChild(span);
    listItem.appendChild(checkbox);
    list.appendChild(listItem);
    }
    var totalItems = 0;
    var inItemText = document.getElementById("goalId");
    var form = document.getElementById("goalForm");
    function btn1() {{
    var itemText = inItemText.value;
    if (!itemText || itemText == " ") {
    return false
    };
    addNewItem(document.getElementById("log_data"), itemText);
    form.reset();
    disableFunction();
    }
    };  
    

不能禁用按钮的原因是您应该使用 boolean 而不是 string

your_button.disabled = true;
your_button.disabled = false;

JSFiddle (使用您的脚本)