web-dev-qa-db-ja.com

セマンティックUIラジオボタンは、ラベルをクリックしてもチェックされません

タイトルが示すように、ラジオボタンはラベル（tex）がクリックされたときにチェックしません。ただし、これはSemanticのサイトでは正常に機能しているようです。

ラジオボタンが機能するセマンティックUIドキュメント： http://semantic-ui.com/modules/checkbox.html

次のサンプルコードは、上記のセマンティックUIドキュメントから直接引用したものです。

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked">
        <label>Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Twice a day</label>
      </div>
    </div>
  </div>
</div>

どうすればこれを修正できますか？

編集：どうやら私はここで言及されているようにラジオボタンのためのいくつかのjavascriptが必要です： http://semantic-ui.com/modules/checkbox.html#/usage 。ただし、ラジオボタン/チェックボックスが機能するために必要な最小限のコードを見つけるのに問題があります。

jqueryhtmlcsssemantic-ui
10
Douglas Gaskell

Javascriptに$('.ui.checkbox').checkbox();が必要でした。

20
Douglas Gaskell

確認したい場合はradio buttonsクリックしてラベルを付けるには、idフィールドにinputを使用し、forにlabelを使用する必要があります。

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked" id="100">
        <label for="100">Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="101">
        <label for="101">2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="102">
        <label for="102">Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="103">
        <label for="103">Twice a day</label>
      </div>
    </div>
  </div>
</div>

jsfiddle-link

もちろん、独自のidおよびfor名を使用できますが、すべての値は一意である必要があります。

4
Igor Ivancha

'label'タグに適用されたスタイルが問題の原因になっているようです。クラス「uiradiocheckbox」を削除し、inputタグをlabelタグ内に移動して試してみると、希望どおりに機能します。この機能が必要な場合は、このクラスをカスタムクラスでオーバーライドしてみてください。

0
Vignesh Sn