我在asp.net工作。 Bootstrap 4,Jquery 3.3.1尝试使用bootstrap4-toggle。我有3个输入,每个输入都有自己的特定ID。在加载时,第一个切换开启。每当更改复选框时,我都会触发一个on change事件。在这个变化事件中,如果我这样做:
$("#chk15849").bootstrapToggle('off');
// or
$("#chk15849").prop('checked', false).change();
我收到一个错误告诉我
未捕获RangeError:超出最大调用堆栈大小。
查看如何执行此操作,看起来我正确地做到了..但是因为我明显得到了错误,所以我不是。这是一些示例代码
这是我正在做的事情的小提琴。 http://jsfiddle.net/4x5r09fv/
$('[type=checkbox]').change(function() {
$("#chk15849").bootstrapToggle('off');
//$("#chk15849").prop('checked', false).change();
})
})
这两个例子都会导致Uncaught Range Error
这是我开始简单的工作到一个更复杂的页面。但就目前而言,我需要弄明白这一点。
当你运行小提琴时,你会看到在加载时第一个切换开启了。单击第二个切换时,将触发更改事件并关闭第一个切换。这是在Chrome的开发工具中出现错误的时候。
任何帮助都会很棒。
- 附加信息。
Aswin Kumar提供了一个解决方案。但建立在他所说的基础之上。如果这更具动态性怎么办?因此,如果切换次数发生变化,我们希望所有切换都关闭,除了打开的切换次数。怎么做我找到了这段代码
$(".toggle").change(function () {
if ($(this).is(":checked")) {
$('[id^="toggle"]').not(this).each(function () {
$(this).bootstrapToggle('off');
});
}
});
但是,此代码与我的代码相同,并且还提供“未捕获的RangeError:超出最大调用堆栈大小”。再一次,我不知道如何更改代码,以便它不会给出错误并允许切换除一个以外的所有代码。
我想我想出来了。首先,因为我在asp.net工作,我希望能够从代码中获取复选框的状态。因此,在数据驱动列表视图中创建的复选框使复选框看起来像这样。
<input id="test" type="checkbox" data-toggle="toggle" runat="server" data-on="It's <br/> Working" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
要处理只在javascript中选中一个复选框的切换,看起来像这样
$(document).ready(function () {
$("#ListDiv [type=checkbox]").change(function () {
console.log("first if");
if ($(this).is(":checked")) {
console.log("second if");
$("#ListDiv [type=checkbox]").not(this).each(function () {
console.log("third one");
$(this).bootstrapToggle('off');
});
}
});
});
ListDiv是listview周围的div的名称。它使得切换仅影响div标签内的复选框。至于后面的代码去看看复选框的状态是什么......用它来处理
For Each i As ListViewItem In Me.lvClassIndex.Items
CType(i.FindControl("lbl"), Label).Text = CType(i.FindControl("test"), HtmlInputCheckBox).Checked.ToString
Next
这是一个测试页面,所以我在每行中取复选框的值,并将结果放在同一行的标签中。但它的效果非常好。如果有超过100行返回它开始有点慢,但这适用于我所追求的。