Question

这是现在令人不安的代码

if(!IsActive) {
        IsActive = true;
        $('#Submit').prop('disabled', true);

        var icheckBoxes = $('input[type="checkbox"]');
        for(var i=0; i < icheckBoxes.length; i++) {
            if(!icheckBoxes.eq(i).is(":checked")) { 
                $('.checkbox'+i).css('color','#ff0000');
            }
            IsActive = false;
            $('#Submit').prop('disabled', false);   
        }

        var sture = $('#sture').val().trim();

        if (sture.length < 3) {         
            $('#sture').parents('.form-group').addClass('has-error');   
            var errormsg = "Check the Page";

            swal('',errormsg,'warning');    
            IsActive = false;
            $('#Submit').prop('disabled', false);           
            return false;
        }

        swal({
              title: "Processing",
              text: "",
              html: true,
              showCancelButton:false,
              showConfirmButton:false,
              allowOutsideClick:false
        }); 

        var values = $('#Form').serialize();
        $.post('/processing/page.html', values, function(data){
            if ( data.status == 1) {

            } 
            else { 

                IsActive = false;
                $('#Submit').prop('disabled', false);
                return false;
            }
        },"JSON");      
    }

现在它应该基本上突出显示所有复选框文本（如果没有选中）并停止处理页面，但它只是停在第一个并使其读取然后再向前移动。

我不确定我在这里做错了什么

Answer 1

以下是opacity css属性的示例，请尝试

function highlight() {
  $('input[type="checkbox"]').each(function() {
     if (!$(this).is(":checked")) {
      $(this).css('opacity', '1');
    } else {
      $(this).css('opacity', '0.5');
    }
  });
}

setInterval(() => highlight(), 1500);

.checkbox1,
.checkbox2,
.checkbox3,
.checkbox4 {
  height: 4em;
  width: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox2" />
<input type="checkbox" class="checkbox3" />
<input type="checkbox" class="checkbox4" />

这里的$.each()版本更易于阅读

function highlight() {
  $('input[type="checkbox"]').each(function() {
    if (!$(this).is(":checked")) {
      $(this).css('opacity', '1');
    } else {
      $(this).css('opacity', '0.5');
    }
  });
}

setInterval(() => highlight(), 1500);

.checkbox1,
.checkbox2,
.checkbox3,
.checkbox4 {
  height: 4em;
  width: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox2" />
<input type="checkbox" class="checkbox3" />
<input type="checkbox" class="checkbox4" />

Answer 2

我已经编辑了你的代码。请检查此链接：http://jsfiddle.net/5V288/1539/

    var icheckBoxes = $('input[type="checkbox"]'); 
    icheckBoxes.each(function(index){  
    if(!$(this).is(":checked")) {                                      
    $('.checkbox'+index).css('outline','2px solid #c00');
    }
            $('#submit').prop('disabled', false);   
    });

在for循环内验证时修复复选框

2 个答案: