Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - checkboxes like radiobuttons
    primarykey
    data
    text
    <p>I have group checkboxes and I like if this group have behaviour like radiobuttons with same name atribute.</p> <p>Each checkbox has different name.</p> <p>Only one can be chosen from checkboxes.</p> <p>How I can do this?</p> <hr> <p><strong>Solution</strong></p> <p>Why I need this? Because we need consistency webUI. Please, this is not question about our application architecture. :)</p> <p><strong>HTML Sample</strong></p> <pre><code>&lt;div class="multiCheckBox"&gt; &lt;span class="multiGroup"&gt; &lt;div&gt;&lt;input class="multiItem" value="111" name="list" type="checkbox" /&gt;111&lt;/div&gt; &lt;div&gt;&lt;input class="multiItem" value="112" name="list" type="checkbox" /&gt;112&lt;/div&gt; &lt;div&gt;&lt;input class="multiItem" value="113" name="list" type="checkbox" /&gt;113&lt;/div&gt; &lt;/span&gt; &lt;span&gt; &lt;div&gt;&lt;input class="multiItem" value="121" name="list" type="checkbox" /&gt;121&lt;/div&gt; &lt;div&gt;&lt;input class="multiItem" value="122" name="list" type="checkbox" /&gt;122&lt;/div&gt; &lt;div&gt;&lt;input class="multiItem" value="133" name="list" type="checkbox" /&gt;123&lt;/div&gt; &lt;/span&gt; &lt;span&gt; &lt;div&gt;&lt;input class="multiItem" value="131" name="list" type="checkbox" /&gt;131&lt;/div&gt; &lt;div&gt;&lt;input class="multiItem" value="132" name="list" type="checkbox" /&gt;132&lt;/div&gt; &lt;div&gt;&lt;input class="multiItem" value="133" name="list" type="checkbox" /&gt;133&lt;/div&gt; &lt;/span&gt; &lt;/div&gt; </code></pre> <p><strong>JavaScript</strong></p> <pre><code>var $groups = $("span.multiGroup", $that); $groups.each(function() { var $group = $(this); var $checkboxes = $(":checkbox", $group); $checkboxes.click(function() { var $activeCheckbox = $(this); var state = $activeCheckbox.attr('checked'); $checkboxes.attr('checked', false); $activeCheckbox.attr('checked', state); }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload