使用动态添加的复选框启用/禁用按钮
Enable/Disable button using dynamically added checkbox's
我正在处理一个简单的待办事项列表。 目前我有三个按钮(输入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 (使用您的脚本)
相关文章:
- 如何在 API 调用后和 if 语句中启用提交按钮
- 根据字段的值启用按钮
- 如何启用单选按钮
- 当我的所有 Ng-from 都有效时启用一个按钮
- 如何使用编辑按钮启用表格行中的所有输入
- 多个javascript按钮(启用/禁用)
- 动态按钮启用基于错误组的挖空 js
- 通用JavaScript来处理单选按钮启用/禁用
- 如何在jQuery中所有文本框都有值时按钮启用
- 数据表按钮启用/禁用示例不起作用
- JavaScript按钮启用和禁用与PHP
- 按钮-启用和禁用
- 基于单选按钮启用或禁用文本框
- 当复选框是否被选中时,按钮启用或禁用
- JQuery按钮启用和禁用CSS功能点击
- 按钮启用和禁用单击
- 我如何通过在Javascript中单击重置按钮启用复选框
- 基于单选按钮启用/禁用功能按钮
- Yui 2.0 通过多个单选按钮启用输入
- 基于单选按钮启用/禁用提交按钮