Разрешить проверять только одну оценку из четырех в строке таблицы

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

<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

Флажок для нескольких вариантов выбора, переключатель - только для одного выбора.Это соглашение.Если вы создаете чекбоксы, но можно выбрать только один, тогда это должен быть переключатель.Вы не можете создавать флажки и писать сложный код, чтобы пользователь не мог выбрать несколько флажков.Перейдите на страницу Радиокнопка HTML и Радиокнопки 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>