创建要由多个控件使用的全局jQuery函数
创建要由多个控件使用的全局jQuery函数
提问于 2014-02-18 15:05:05
我有多个控件，不同类型的控件具有相同的行为。如何使用单个函数重用相同的行为。现在，我为他们每个人都有一个功能。这个函数工作正常，但是我想找到一种方法，如果我们可以用一个全局函数替换这个函数并重用它。
$(document).ready(function () {
var threechecked = false;
var fourchecked = false;
$('#<%=CheckBoxList1.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Unknown';
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (threechecked) {
$("#<%=CheckBoxList1.ClientID%> input").removeAttr('disabled');
threechecked = false;
return;
}
else {
$("#<%=CheckBoxList1.ClientID%> input").attr('checked', false);
$(this).attr('checked', true);
$('#<%=CheckBoxList1.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
threechecked = true;
}
}
});
$('#<%=CheckBoxList2.ClientID%> input:checkbox').click(function () {
var currentIdone = 'Unknown';
var currentId = $(this).next().html();
if (currentId == currentIdone) {
if (fourchecked) {
$("#<%=CheckBoxList2.ClientID%> input").removeAttr('disabled');
checked = false;
return;
}
else {
$("#<%=CheckBoxList2.ClientID%> input").attr('checked', false);
$(this).attr('checked', true);
$('#<%=CheckBoxList2.ClientID%> input:not(:checked)').attr('disabled', 'disabled');
fourchecked = true;
}
}
});是否有一种方法可以通过每个控件创建单个函数并重用相同的函数？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-19 14:54:29
我想是这样的
$( ".unknownSelectable input" ).change(function( event ){
var labelSelected = $( this ).next().html();
if ( labelSelected == "Unknown" ) {
var $siblings = $( this ).siblings( "input[type='checkbox']" );
if( $( this ).is( ":checked" ) )
{
$siblings.prop( "checked", false );
$siblings.attr( "disabled", "disabled" );
}
else{
$siblings.removeAttr( "disabled" );
}
}
});JSBin
Stack Overflow用户
发布于 2014-02-18 15:10:00
有些人可能会认为，将函数附加到全局window对象可能有些奇怪，但实际上它与全局函数是一样的。
window.foo = function() {
/* Your code here */
};然后，当DOM准备就绪时，可以执行此函数：
$(document).ready(window.foo);Stack Overflow用户
发布于 2014-02-19 14:14:31
我为你的问题做了一个解决方案的例子。如果你愿意的话，我把它放在JSBin里
考虑到您有这个HTML：
<div class="unknownSelectable">
<input type="checkbox" value="0" name="Anything" id="Anything1" />
<label for="Anything1">Unknown</label>
<input type="checkbox" value="0" name="Anything" id="Anything2" />
<label for="Anything2">Label 1</label>
<input type="checkbox" value="0" name="Anything" id="Anything3" />
<label for="Anything3">Label 2</label>
<input type="checkbox" value="0" name="Anything" id="Anything4" />
<label for="Anything4">Label 3</label>
</div>
<h1>Select</h1>
<div class="unknownSelectable">
<input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything1" />
<label for="AnotherAnything1">Unknown</label>
<input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything2" />
<label for="AnotherAnything2">Label 1</label>
<input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything3" />
<label for="AnotherAnything3">Label 2</label>
<input type="checkbox" value="0" name="AnotherAnything" id="AnotherAnything4" />
<label for="AnotherAnything4">Label 3</label>
</div>只要把这个Javascript放在一起就可以了：
$( ".unknownSelectable input" ).change(function( event ){
var labelSelected = $( this ).next().html();
if ( labelSelected == "Unknown" ) {
var $siblings = $( this ).siblings( "input[type='checkbox']" );
if( $( this ).is( ":checked" ) )
$siblings.prop( "checked", false );
else
$siblings.prop( "checked", true );
}
});我将事件从单击更改为更改，因为单击输入或标签并不重要。我还将它封装在div元素中，但不管如何，您也可以将它包装在另一个HTML元素中。
对不起我的英语，如果我犯了一些英语错误，请随时修改和改进。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21857625
复制相关文章
相似问题
腾讯云开发者
