If you want only one option selected at a time, use radio buttons rather than checkboxes

No, I would like to have possibility to have more then one checked at the same time. But not "Ej" one in case one or more others are checked.

SerZKO:

When one is checked, disable the incompatible ones in your on-click handler. When it's unchecked, re-enable them.

...roboticus

When your only tool is a hammer, all problems look like your thumb.

This is a question more suitable for a javascript group. And I would still urge you to drop those CGI helpers and write raw HTML. Then you would fit into a web developer group and get (hopefully) good help from there.

Aaanyway, if you are willing to ignore the cosmetic aspects, you would be better off doing this in your submission code (you need to prioritise the "E" checkbox over the others.) You will need to deal with it in the submission code anyway. There might be other checkboxes checked even if the "E" one is already checked.

Anyway, the javascript-osmosis person that I am, here seems to be a workable function. I honestly don't know if it is in any way cross-browser compatible or anything.

function toggleOther (elName, ignore) {
    var buttons = document.getElementsByName(elName);
    var disable = false;
    if (ignore.checked) {
        disable = true;
    }
    for (var i = 0; i < buttons.length; i++) {
        if (buttons[i] == ignore) {
            next;
        }
        buttons[i].disabled = disable;
    }
}
[download]

And it is called like this:

<input type="checkbox" name="GRU$Za" value="E" onclick="toggleOther('G
+RU$Za', this)" />
[download]

I guess I skimmed your question a bit too fast, as I noticed you were asking for radiobutton-like behaviour. That is somewhat more difficult to implement, but my function's button-disabling behaviour might suffice.

Indeed, as the monk below me said, for immediate feedback, you need JS. It, however, would not hurt to just say somewhere on the UI that the "E" button, if checked, overrides the others; you will need to just implement it in code then.

# If 'E' box is checked, then ignore the others
my @checked = $qry->param("GRU$Za");
if (grep { $_ eq 'E' } @checked) {
  @checked = ('E');
}
[download]

Hej Anonimous monk and thanks for your reply,

That's an excellent idea to check it on submission. The thing is that if neither of "P", "F" or "K" is checked then "Ej" should be checked and vice versa - if any(or more) of "P", "F" or "K" are checked then "Ej" must not be checked.

Anyhow, thanks for pointing to that direction

Hej Anonimous monk(s),

I listened to your advices and found a way to get it done with a lot of help from web of course (it showed then if you search in english you get a lot more hits then when you're searching in swedish ;-) ). It ended up with a code like this :

my $JCHECK=<<END;
  function CheckBoxes() {
    if((document.getElementById("P").checked == true) || (document.get
+ElementById("F").checked == true) || (document.getElementById("K").ch
+ecked == true)) {
      document.getElementById("Ej").checked = false;}
    else {document.getElementById("Ej").checked = true;}
    }
END
[download]

I changed then header to this

print $qry->start_html(-title => "L\xE4gg till",
                       -lang => 'sv',
                       -bgcolor => "#336699",
                       -script => $JCHECK, #ADDED
                       -style => {
                             -code => '
                              body,p,b,i,em,dt,li,div,th,td,Tr,u,optio
+n,form,dd,dl,sl {
                                    font-family: Arial, sans-serif; 
                                    font-size: 12px; color: #FFFFFF; }
                              a {font-family: Arial, sans-serif; font-
+size: 14px; color: #FFFFFF;}
                              h1 {font-family: Arial, sans-serif; font
+-size: 30px; color: #FFFFFF;}
                              h2 {font-family: Arial, sans-serif; font
+-size: 18px; color: #FFFFFF;}
                              h3 {font-family: Arial, sans-serif; font
+-size: 18px; color: #FFFFFF;}
                            ',
                           },  
);
[download]

And checkboxes are not now checkbox_group (which was very convinient to write), but independant checkboxes. Like this :

print $qry->table ({ Border => 1, Cellpadding => 3, bordercolor =>"#FF
+FFFF"},
Tr(
      td(checkbox(-name => 'P', -id =>'P', -value=> 'Pri', -onClick =>
+ "CheckBoxes()")),
      td(checkbox(-name => 'F', -id =>'F', -value=> 'For', -onClick =>
+ "CheckBoxes()")),
      td(checkbox(-name => 'K', -id =>'K', -value=> 'Kap', -onClick =>
+ "CheckBoxes()")),
      td(checkbox(-name => 'Ej',-id =>'Ej', -value=> 'Ej', -checked =>
+ 'checked', -onClick => "CheckBoxes()")));
[download]

and it seems to be working, but only for the first row, så I have to add some iteration somehow but I hope to find it somewhere on the web.

Might be usefull to someone

As I mentioned, somewhat more difficult to implement; and I would suggest to drop your approach and settle for something simpler as it will stay that messy.

The JS function and server-side code I provided are probably good enough, when used together.

(The easiest algorithm, code-wise, would probably be "mark Ej checkbox somehow, set onclick handlers for all checkboxes to call function that clears other checkboxes if Ej is checked" ... I bet it can be done with no more than a few lines' change to my function, but my javascript-fu is not up for the task today)

Hej Anonimous monk and thanks for your reply,

And thanks for being honest.

This is really a question for JavascriptMonks, but I'll chime in to say jQuery makes fiddling with things like checkboxes a lot easier, and you don't have to plug those ugly onClick things into your HTML:

<head>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
+.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('input.g[name!="loner"]').click(function(e){
                $('input.g[name="loner"]').prop('checked',false);
            });
            $('input.g[name="loner"]').click(function(e){
                $('input.g[name!="loner"]').prop('checked',false);
            });
        });
    </script>
</head>
<body>
    <form>
        <input type=checkbox name=loner class=g />Loner
        <input type=checkbox name=a class=g />A
        <input type=checkbox name=b class=g />B
        <input type=checkbox name=c class=g />C
        <input type=checkbox name=d class=g />D
    </form>
</body>
[download]

Hej Aaron and thanks for your reply,

Your solution seems to be solution for all my problems and I 'll for sure try to implement it first thing in the morning, although I'm not sure that I'm going to succeed:-)

Anyhow thanks for your time and effort!!