Question

我正在尝试为我的表单进行自定义验证。我们将来不会知道我们要在表单中添加/删除多少个boltons。

应检查是否未选中单选按钮，将“错误类”添加到部分。

问题是我点击的任何单选按钮只会影响最后一部分。

function checkBoltons(){

    var boltons = [1,2,3];

    for (var i of boltons) {
    
		
			var $bolton = $('#bolton-' + i);
			
			if ( $('input[name="data[ObeBolton]['+i+']"]').is(':checked') == true ) {
				
				$bolton.removeClass('section-error');
				
			} else {
				$bolton.addClass('section-error');
				
			}
			
			$('input[name="data[ObeBolton]['+i+']"]:radio').change(function(){
				$('#bolton-' + i).removeClass('section-error');
			});
    }		
}

$(".checkBoltons").click(function(){
    checkBoltons();
})

.section-error {
	background-color: rgb(255, 218, 218);
	border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bolton-1">
    <p>bolton-1</p>
    <input type="radio" name="data[ObeBolton][1]" value="1" />
    <input type="radio" name="data[ObeBolton][1]" value="2" /> 
</div>

<div id="bolton-2">
    <p>bolton-2</p>
    <input type="radio" name="data[ObeBolton][2]" value="3" />
    <input type="radio" name="data[ObeBolton][2]" value="4" /> 
</div>

<div id="bolton-3">
    <p>bolton-3</p>
    <input type="radio" name="data[ObeBolton][3]" value="5" />
    <input type="radio" name="data[ObeBolton][3]" value="6" /> 
</div>


<button class="checkBoltons">Check Boltons</button>

Answer 1

正如@TrueBlueAussie建议的那样，这里的解决方案是使用单个处理程序

<div id="bolton-1" class="bolton">
    <p>bolton-1</p>
    <input type="radio" name="data[ObeBolton][1]" value="1" />
    <input type="radio" name="data[ObeBolton][2]" value="2" />
</div>
<div id="bolton-2" class="bolton">
    <p>bolton-2</p>
    <input type="radio" name="data[ObeBolton][2]" value="3" />
    <input type="radio" name="data[ObeBolton][2]" value="4" />
</div>
<div id="bolton-3" class="bolton">
    <p>bolton-3</p>
    <input type="radio" name="data[ObeBolton][3]" value="5" />
    <input type="radio" name="data[ObeBolton][3]" value="6" />
</div>
<button class="checkBoltons">Check Boltons</button>

然后

$(".checkBoltons").click(function () {
    $('.bolton').each(function(){
        var checked = $(this).find(':radio').is(':checked');
        $(this).toggleClass('section-error', !checked);        
    })
})
$('.bolton input:radio').change(function () {
    $(this).closest('.bolton').removeClass('section-error');
});

演示：Fiddle

jquery函数不能在循环

1 个答案: