javascript - 纯 CSS 星级评分 - 强制非零结果

Question

我一直在使用此处的纯 CSS 示例: http://www.danielkeithjones.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/

但我无法弄清楚如何在选择了零星(它启动为)时阻止表单提交。基本上:如果需要基于星号的问题，我想说“它必须是 1-5 星”，但由于默认值为 0，JavaScript 似乎总是认为它是零，直到表单保存。

我错过了什么？

这是我正在使用的 JavaScript:

    // Check radio buttons
    jQuery("input.input-required:radio").each(function() {
        var name = jQuery(this).attr("name");
        var group = jQuery("input:radio[name='"+name+"']");
        radio_groups[name] = false;
        radio_groups[name] = (radio_groups[name] == true) || (group.is(":checked") && group.val() != "0 stars");
    });
    for(var key in radio_groups) {
        if(radio_groups.hasOwnProperty(key) && radio_groups[key] == false) {
            alert("This question is required");
            return false;
        }
    }

Answer 1

我不确定您的 HTML 是什么样子，但具有以下 html:

<form>
  <input type="radio" name="testing" value="0 stars" class="input-required" checked>
  <input type="radio" name="testing" value="1 stars" class="input-required">
  <input type="radio" name="testing" value="2 stars" class="input-required">
  <input type="radio" name="testing" value="3 stars" class="input-required">
  <input type="radio" name="testing" value="4 stars" class="input-required">
  <input type="radio" name="testing" value="5 stars" class="input-required">
  <button type="submit">Submit</button>
</form>

和以下js:

$('form').on('submit', function(){
    var valid=true;
    $('input.input-required:radio').each(function(){
        if (valid) {
          var name = this.name,
              value = $('input[name="' + name + '"]:checked').val();
          if (value == "0 stars"){
            alert('This question is required');
            valid=false;
          }
        }
    });
    return valid;
});

有效。