Databases
StackOverflow2013
Postsdbo
POjQuery - checkboxes like radiobuttons
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - checkboxes like radiobuttons
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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