checkbox row selection limit

Question

1. I would like to limit selected rows to one at the time, any hints/help how to do that?
2. In case if I want that the limit is still one at the time and with click on another automatically deselect selected one and select new "clicked" one?

Thanks for answers/hints.

I have following code:

    var cb$, checked, allRows$,
    sel$ = $("#P1_SELECTED"),
    event = this.browserEvent,
    target$ = $(event.target),
    th$ = target$.closest("th"),
    tr$ = target$.closest("tr");

if (th$.length) {
    // the click was on the "select all"
    // checkbox or checkbox cell
    cb$ = th$.find("input");
    if (cb$.length && cb$.val() === "all") {
        checked = cb$[0].checked;
        if (target$[0].nodeName !== 'INPUT') {
            // only do this if the click was not on the checkbox
            // because the checkbox will check itself
            checked = cb$[0].checked = !checked;
        }
        if (sel$.val() === "") {
            sel$.val("|");
        }
        $("#myreport").find("td input").each(function() {
            this.checked = checked;
            // give a visual style to the [un]selected row
            $(this).closest("tr").toggleClass("selected", checked);
            // update the hidden selected item
            sel$.val(sel$.val().replace("|" + this.value + "|", "|"));
            if (checked) {
                sel$.val(sel$.val() + this.value + "|");
            }
        });
    }
} else if (tr$.length) {
    // the click was on some other data row
    cb$ = tr$.find("td").first().find("input");
    checked = cb$[0].checked;
    if (target$[0].nodeName !== 'INPUT') {
        // only do this if the click was not on the checkbox
        // because the checkbox will check itself
        checked = cb$[0].checked = !checked;
    }
    // give a visual style to the [un]selected row
    tr$.toggleClass("selected", checked);
    // update the hidden selected item
    if (checked) {
        if (sel$.val() === "") {
            sel$.val("|");
        }
        sel$.val(sel$.val() + cb$.val() + "|");
    } else {
        sel$.val(sel$.val().replace("|" + cb$.val() + "|", "|"));        
    }
    // update the select all checkbox state
    allRows$ = $("#myreport").find("td input");
    checked = (allRows$.length === allRows$.filter(":checked").length);
    $("#PodatkiDN").find("th input")[0].checked = checked;
}

Answer 1

Without a clear HTML to work with, I create an example that can help you understand the way I intended your question. You can select a single row at a time You can find the JSFIDDLE HERE

table, tr, td {
    border-collapse: collapse;
    padding: 0 10px;
    margin: 0;
}
tr.selectable {
    background-color: #ddd;
    cursor: pointer;
}
tr.selectable:hover {
    background-color: #eee;
}
tr.selected {
    background-color: #000;
    color: white;
}
tr.selected:hover {
    background-color: #333;
}

<table>
    <tr class="selectable">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr class="selectable">
        <td>2.1</td>
        <td>2.2</td>
    </tr><tr class="selectable">
        <td>3.1</td>
        <td>3.2</td>
    </tr>
</table>

$( "table" ).on( "click", "tr.selectable", function() {
    $( ".selectable" ).removeClass( "selected" );
    $( this ).addClass( "selected" );
});