Question

我正在尝试检查input[name="status"]时的情况并且值为'no'＆amp;＆amp; input[name="owner"]为空，然后添加类error-highlight，否则将其删除。

当用户选择第一个“no”选项然后它触发错误类时，它工作正常。但问题是当用户首先在input[name="owner"]中选择一个选项，然后在input[name="status"]中选择“否”选项时。它会再次触发错误类，即使其他输入已被检查且不为空。这是我的代码：

$(document).ready(function() {
  $('.selectStatus').change(function() {
    var selected = $(this).val();
    if (selected == 'no') {
      $('.selectOwner').addClass('error-higlight');
    } else {
      $('.selectOwner').removeClass('error-higlight');
    }
  });
});
$(document).ready(function() {
  $('.selectOwner').change(function() {
    var selected = $(this).val();
    if (selected != '') {
      $('.selectOwner').removeClass('error-higlight');
    } else {
      $('.selectOwner').addClass('error-higlight');
    }
  });
});

.error-higlight {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(217, 83, 80, 1);
  -moz-box-shadow: 0px 0px 5px 0px rgba(217, 83, 80, 1);
  box-shadow: 0px 0px 5px 0px rgba(217, 83, 80, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
  <label for="owner1" class="text-left owner">
        <input class="selectOwner" name="owner" id="owner1" type="radio" />
         <span class="overlay-color"></span>Working</label>
</div>
<div class="field text-left">
  <label for="owner2" class="text-left owner">
        <input class="selectOwner" name="owner" id="owner2" type="radio" />
         <span class="overlay-color"></span>Jobless</label>
</div>


<div class="col-sm-4 col-sm-offset-2 col-xs-4 col-xs-offset-2">
  <label for="Yes" class="text-left">Yes</label>
  <input class="selectStatus" name="status" id="Yes" type="radio" value="yes" />
</div>
<div class="col-sm-4 col-xs-4">
  <label for="No" class="text-left">No</label>
  <input class="selectStatus" name="status" id="No" type="radio" value="no" />
</div>

Answer 1

您需要将两个函数合并在一起并创建一个if语句来询问selectStatus == no＆amp;＆amp; selectOwner ==''。

根据您目前的情况，它只是检查每个输入，因此不考虑其他输入的值。

Answer 2

在更改此状态时，您需要检查owner是否为undefined

$(document).ready(function() {
  $('.selectStatus').change(function() {
    var selected = $(this).val();
    if (selected == 'no' && $("input[name='owner']:checked").val() === undefined) {
      $('.selectOwner').addClass('error-higlight');
    } else {
      $('.selectOwner').removeClass('error-higlight');
    }
  });
});
$(document).ready(function() {
  $('.selectOwner').change(function() {
    var selected = $(this).val();
    if (selected != '') {
      $('.selectOwner').removeClass('error-higlight');
    } else {
      $('.selectOwner').addClass('error-higlight');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
  <label for="owner1" class="text-left owner">
    <input class="selectOwner" name="owner" id="owner1" type="radio" />
     <span class="overlay-color"></span>Working</label>
</div>
<div class="field text-left">
  <label for="owner2" class="text-left owner">
    <input class="selectOwner" name="owner" id="owner2" type="radio" />
     <span class="overlay-color"></span>Jobless</label>
</div>


<div class="col-sm-4 col-sm-offset-2 col-xs-4 col-xs-offset-2">
  <label for="Yes" class="text-left">Yes</label>
  <input class="selectStatus" name="status" id="Yes" type="radio" value="yes" />
</div>
<div class="col-sm-4 col-xs-4">
  <label for="No" class="text-left">No</label>
  <input class="selectStatus" name="status" id="No" type="radio" value="no" />
</div>

<style>
  .error-higlight {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(217, 83, 80, 1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(217, 83, 80, 1);
    box-shadow: 0px 0px 5px 0px rgba(217, 83, 80, 1);
  }
</style>

Answer 3

我相信这就是你要找的东西：

<div class="field text-left">
    <label for="owner1" class="text-left owner">
    <input class="selectOwner" name="owner" id="owner1" type="radio" value="working" />
     <span class="overlay-color"></span>Working</label>
</div>
<div class="field text-left">
    <label for="owner2" class="text-left owner">
    <input class="selectOwner" name="owner" id="owner2" type="radio" value="jobless" />
     <span class="overlay-color"></span>Jobless</label>
</div>


<div class="col-sm-4 col-sm-offset-2 col-xs-4 col-xs-offset-2">
    <label for="Yes" class="text-left">Yes</label>
    <input class="selectStatus" name="status" id="Yes" type="radio" value="yes" />
</div>
<div class="col-sm-4 col-xs-4">
    <label for="No" class="text-left">No</label>
    <input class="selectStatus" name="status" id="No" type="radio" value="no"  />  
</div>

<style>
.error-higlight{
    -webkit-box-shadow: 0px 0px 5px 0px rgba(217,83,80,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(217,83,80,1);
    box-shadow: 0px 0px 5px 0px rgba(217,83,80,1);
}
</style>

<script>
$(document).ready(function() {
    $('input[name=status]').click(function () {
        if ($(this).val() == 'no' && $('input[name=owner]:checked').val() == undefined) {
            $('.selectOwner').addClass('error-higlight');
        } else {
            $('.selectOwner').removeClass('error-higlight');                    
        }
    });

    $('input[name=owner]').click(function () {
        if ($('input[name=status]:checked').val() !== undefined) {
            $('.selectOwner').removeClass('error-higlight');
        }
    }); 
});
</script>

选中输入[name =“status”]并且值为'no'＆amp;＆amp;输入[name =“owner”]未选中，然后添加Class else删除Class

3 个答案: