используя флажок в качестве переключателя

Question

Я ищу способ для пользователей выбрать один из двух вариантов (сила или слабость) для списка качеств.

например:

                   strength     weakness  not applicable
1. Communication 
2. Punctuality
   ...

Радиокнопка позволяет мне выбрать силу или слабость. Тем не менее, я хочу, чтобы пользователь проверял только те качества, которые применимы, и если пользователь случайно выбрал качество, нет способа отменить выбор радиокнопки, если нет третьей радиокнопки, которая называется неприменимой или если пользователь повторно вводит страница. Мне было интересно, есть ли способ получить гибкость флажка (поставить / снять флажок) в дополнение к отключению или включению другого флажка, когда один из них установлен или снят, вместо использования трех переключателей.

Я не думаю, что видел такое поведение раньше, поэтому задавался вопросом, есть ли более элегантный способ сделать это. Я открыт для других идей, чтобы получить такую ​​же функциональность. Использование флажка в качестве переключателя было просто мыслью.

Большое спасибо.

Answer 1

Решение на основе JavaScript

function SetSel(elem)
{
  var elems = document.getElementsByTagName("input");
  var currentState = elem.checked;
  var elemsLength = elems.length;

  for(i=0; i<elemsLength; i++)
  {
    if(elems[i].type === "checkbox")
    {
       elems[i].checked = false;   
    }
  }

  elem.checked = currentState;
}​

<input type="checkbox" class="chkclass" onclick="SetSel(this);" />
<input type="checkbox" class="chkclass" onclick="SetSel(this);" />
<input type="checkbox" class="chkclass" onclick="SetSel(this);" />
<input type="checkbox" class="chkclass" onclick="SetSel(this);" />

Рабочая демоверсия

Решение на основе jQuery

$(function(){
    $("input:checkbox.chkclass").click(function(){
      $("input:checkbox.chkclass").not($(this)).removeAttr("checked");
      $(this).attr("checked", $(this).attr("checked"));    
    });
});​

<input type="checkbox" class="chkclass" />
<input type="checkbox" class="chkclass" />
<input type="checkbox" class="chkclass" />
<input type="checkbox" class="chkclass" />

Рабочая демоверсия

Answer 2

Вы не должны использовать флажки в качестве переключателей (или наоборот): это не согласуется с ментальной моделью пользователя, поэтому оно смущает людей.

Это проблема, не имеющая идеального решения, но ваше первоначальное предложение о выборе опции «не применимо» в составе группы из 3 переключателей довольно распространено. Если вы предварительно выбрали опцию «неприменимо» по умолчанию и, возможно, лишний раз подчеркнули ее (например, выделили серым цветом), то с точки зрения пользователя это будет почти так, как если бы было только 2 варианта, но они может восстановить, если они случайно выберут один и захотят «отменить выбор».

Answer 3

это правильная форма, "галочка" является проприетарной, а не атрибутом

   $(function(){
      $("input:checkbox.chkclass").each(function(){
        $(this).change(function(){
            $("input:checkbox.chkclass").not($(this)).prop("checked",false);
            $(this).prop("checked", $(this).prop("checked"));       
        });   
      });
    });