SO jQuery Fiddle
Test Fiddle mainly for SO Questions jQuery 1.4.3, UI 1.8.5
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<div>
<div class="repay-infor">
<input type="checkbox" value="box1" class="uncheckbox"/>
</div>
<div class="repay-infor">
<input type="checkbox" value="box2" class="uncheckbox"/>
</div>
<div class="repay-infor">
<input type="checkbox" value="box3" class="uncheckbox"/>
</div>
<div class="repay-infor">
<input type="checkbox" value="box4" class="uncheckbox"/>
</div>
<div class="repay-infor">
<input type="checkbox" value="box5" class="uncheckbox"/>
</div>
<div class="repay-infor">
<input type="checkbox" value="box6" class="uncheckbox"/>
</div>
</div>
<button onclick="checkout()">
查看当前选中的box
</button>
<div id="tip">
</div>
CSS
.highlight { background-color: #ffeeee; }
JavaScript
var $boxCollection = $('input[type="checkbox"]');
$boxCollection.click(function(e){
var $currentBox = $(this)
var currentIdx = $currentBox.parents('.repay-infor').index()
var action = $currentBox.attr('checked') ? 'select' : 'cancelSelect'
//如果当前要执行选择动作 并且上一个CheckBox为未选中状态 则阻止这个动作
if(currentIdx !== 0 && action === 'select' && !isPrevCheckBoxChecked(currentIdx)){
e.preventDefault()
}
//如果当前要执行取消选择动作 并且下一个CheckBox为选中状态 则阻止这个动作
if(action === 'cancelSelect' && isNextCheckBoxChecked(currentIdx)){
$.each($boxCollection, function(i, box){
console.log(box)
if(i > currentIdx) {
$(box).attr('checked', false)
}
})
}
})
$boxCollection.change(function(){
$(this).toggleClass('checkbox').toggleClass('uncheckbox')
})
function isPrevCheckBoxChecked(currentIdx){
return $boxCollection.eq(currentIdx - 1).attr('checked')
}
function isNextCheckBoxChecked(currentIdx){
return $boxCollection.eq(currentIdx + 1).attr('checked')
}
window.checkout = function(){
var selected = []
$.each($('input[type="checkbox"]:checked'), function(i, boxEl){
selected.push(boxEl.value)
})
log(selected.join(','))
}
function log(msg){
$('#tip').text(msg)
}