允许在表格行中仅检查四个中的一个分数

Question

我有html表。同一行有四个复选框，分数从1到4：

  <table class="quartz-table" id="perfskills_table">     
    <thead>
      <tr>
        <th>Driver</th>
        <th>Sub-Driver</th>
        <th>Skill</th>  
        <th style="text-align: right;"><span style="margin-right: 60px;">Marks</span></th>  
      </tr>
    </thead>
    <tbody>
      <tr class="full_qst" ng-repeat="perf_skill in perfList">
        <td>{{ perf_skill.driver }}</td>
        <td>{{ perf_skill.subdriver }}</td>
        <td>{{ perf_skill.skills }}</td>
        <td> 
          <div class="mrk">
            <img alt="" src="imagesQuartz/check.png" class="check">
            <label class="choice" for="{{perf_skill.id}}.1">
              <input class="q" name="q1_a[]" type="checkbox" id="{{perf_skill.id}}.1" 
                     ng-model="value1" ng-true-value="1" ng-false-value="0" ng-click="updateForm(value1,perf_skill)"> 1 </label>
            <label class="choice" for="{{perf_skill.id}}.2">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.2" type="checkbox" 
                     ng-model="value2" ng-true-value="2" ng-false-value="0" ng-click="updateForm(value2,perf_skill)"> 2 </label>
            <label class="choice" for="{{perf_skill.id}}.3">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.3" type="checkbox"
                     ng-model="value3" ng-true-value="3" ng-false-value="0" ng-click="updateForm(value3,perf_skill)"> 3 </label>
            <label class="choice" for="{{perf_skill.id}}.4">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.4" type="checkbox"
                     ng-model="value4" ng-true-value="4" ng-false-value="0" ng-click="updateForm(value4,perf_skill)"> 4 </label>
          </div>  
        </td>
      </tr>
    </tbody>
  </table>

我用这个函数调用我的js脚本：

<script type="text/javascript">
  loadScript("Quartz/quartz/scoreboard/checkbox.js", function(){});  
</script>  

还有checkbox.js，我尝试不允许用户检查行中的多个复选框：

$('input.q').on('change', function() {
  $(this).parents('.full_qst').find(".q[name='"+$(this).attr("name")+"']").not(this).prop('checked',false);
  if ($(this).closest('tr').find('input:checked').length > 0) {
    $(this).closest('tr').find('.check').css('visibility', 'visible');
  } else {
    $(this).closest('tr').find('.check').css('visibility', 'hidden');
  }
});  

它有一种奇怪的行为。有时它有时会起作用。

如何限制系统以允许用户仅选中一个复选框并在选中复选框后显示隐藏的图像？如果选中另一个，则更改该值。我使用angularjs。也许有办法以棱角分明吗？

Answer 1

复选框用于多个选择，单选按钮仅用于一个选择。这是一个惯例。如果您要创建复选框，但只能选择一个复选框，则它必须是单选按钮。您无法创建复选框并编写复杂的代码以防止用户选择多个复选框。转到Radio button HTML和Radio Buttons UX Design

只需将复选框更改为单选按钮即可。

 <table class="quartz-table" id="perfskills_table">     
    <thead>
      <tr>
        <th>Driver</th>
        <th>Sub-Driver</th>
        <th>Skill</th>  
        <th style="text-align: right;"><span style="margin-right: 60px;">Marks</span></th>  
      </tr>
    </thead>
    <tbody>
      <tr class="full_qst" ng-repeat="perf_skill in perfList">
        <td>{{ perf_skill.driver }}</td>
        <td>{{ perf_skill.subdriver }}</td>
        <td>{{ perf_skill.skills }}</td>
        <td> 
          <div class="mrk">
            <img alt="" src="imagesQuartz/check.png" class="check">
            <label class="choice" for="{{perf_skill.id}}.1">
              <input class="q" name="q1_a[]" type="radio" id="{{perf_skill.id}}.1" 
                     ng-model="value1" ng-true-value="1" ng-false-value="0" ng-click="updateForm(value1,perf_skill)"> 1 </label>
            <label class="choice" for="{{perf_skill.id}}.2">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.2" type="radio" 
                     ng-model="value2" ng-true-value="2" ng-false-value="0" ng-click="updateForm(value2,perf_skill)"> 2 </label>
            <label class="choice" for="{{perf_skill.id}}.3">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.3" type="radio"
                     ng-model="value3" ng-true-value="3" ng-false-value="0" ng-click="updateForm(value3,perf_skill)"> 3 </label>
            <label class="choice" for="{{perf_skill.id}}.4">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.4" type="radio"
                     ng-model="value4" ng-true-value="4" ng-false-value="0" ng-click="updateForm(value4,perf_skill)"> 4 </label>
          </div>  
        </td>
      </tr>
    </tbody>
  </table>

Answer 2

<table class="quartz-table" id="perfskills_table">     
    <thead>
      <tr>
        <th>Driver</th>
        <th>Sub-Driver</th>
        <th>Skill</th>  
        <th style="text-align: right;"><span style="margin-right: 60px;">Marks</span></th>  
      </tr>
    </thead>
    <tbody>
      <tr class="full_qst" ng-repeat="perf_skill in perfList">
        <td>{{ perf_skill.driver }}</td>
        <td>{{ perf_skill.subdriver }}</td>
        <td>{{ perf_skill.skills }}</td>
        <td> 
          <div class="mrk">
            <img alt="" src="imagesQuartz/check.png" class="check">
            <label class="choice" for="{{perf_skill.id}}.1">
              <input class="q" name="q1_a[]" type="radio" id="{{perf_skill.id}}.1" 
                     ng-model="value1" ng-true-value="1" ng-false-value="0" ng-click="updateForm(value1,perf_skill)"> 1 </label>
            <label class="choice" for="{{perf_skill.id}}.2">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.2" type="radio" 
                     ng-model="value2" ng-true-value="2" ng-false-value="0" ng-click="updateForm(value2,perf_skill)"> 2 </label>
            <label class="choice" for="{{perf_skill.id}}.3">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.3" type="radio"
                     ng-model="value3" ng-true-value="3" ng-false-value="0" ng-click="updateForm(value3,perf_skill)"> 3 </label>
            <label class="choice" for="{{perf_skill.id}}.4">
              <input class="q" name="q1_a[]" id="{{perf_skill.id}}.4" type="radio"
                     ng-model="value4" ng-true-value="4" ng-false-value="0" ng-click="updateForm(value4,perf_skill)"> 4 </label>
          </div>  
        </td>
      </tr>
    </tbody>
  </table>

将复选框更改为单选按钮