javascript - hasAttribute 不动态改变

Question

我目前在我的表单上使用 jQuery 验证器，提交表单时，无论选中还是未选中，验证器上的 checked 属性似乎都没有更改。

这是我的 HTML:

<div class="col-sm-10 col-sm-offset-1">
    <div class="col-sm-6">
        <div class="choice" data-toggle="wizard-radio">
            <input type="radio" name="platform" value="P1">
            <div class="icon">
                <img src="{{ asset('images/platform1.png') }}" style="height: 100px;">
            </div>
            <h6>Platform 1</h6>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="choice" data-toggle="wizard-radio">
            <input type="radio" name="platform" value="P2">
            <div class="icon">
                <img src="{{ asset('images/platform2.png') }}" style="height: 100px;">
            </div>
            <h6>Platform2</h6>
        </div>
    </div>
    <label for="platform" class="error" style="display:none;">Please choose one.</label>
</div>

这是我的 JS:

// Code for the Validator
var $validator = $('.wizard-card form').validate({
    rules: {
        platform: {
            required: function () {
                var checked = false;
                $('input[name="platform"]').each(function() {
                    if(jQuery(this)[0].hasAttribute('checked')) {
                        var checked = true;
                    }
                });
                console.log(checked);
                return checked;
            }
        }
    }
});

我什至尝试过仅使用 return $('[name="platform"]:checked').length > 0; 无济于事。

Answer 1

编辑

也许你把这里的任务过于复杂化了......

这个简单的规则应该有效:

$('.wizard-card form').validate({
  rules: {
    platform: "required"
  }
});

.error{
  outline:3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<div class="wizard-card">
  <form>
    <div class="col-sm-10 col-sm-offset-1">
      <div class="col-sm-6">
        <div class="choice" data-toggle="wizard-radio">
          <input type="radio" name="platform" value="P1">
          <div class="icon">
            <img src="https://via.placeholder.com/350x150" style="height: 100px;">
          </div>
          <h6>Platform 1</h6>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="choice" data-toggle="wizard-radio">
          <input type="radio" name="platform" value="P2">
          <div class="icon">
            <img src="https://via.placeholder.com/350x150" style="height: 100px;">
          </div>
          <h6>Platform2</h6>
        </div>
      </div>
      <label for="platform" class="error" style="display:none;">Please choose one.</label>
    </div>
    <button id="done">Submit</button>
  </form>
</div>

我建议您阅读the documentation更仔细一点。