how to restrict jqxradiobutton navigable by keyboard tab key - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, jqxRadioButton, radio, radio button, tab, tabindex

This topic contains 4 replies, has 2 voices, and was last updated by Venu Gopal 10 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

how to restrict jqxradiobutton navigable by keyboard tab key Posts

November 1, 2013 at 4:42 am how to restrict jqxradiobutton navigable by keyboard tab key #31733

Participant

how to restrict jqxradiobutton navigable by keyboard tab key… i tried putting tabindex property = -1 to the div. but it is showing error.

Thank you

November 1, 2013 at 10:41 am how to restrict jqxradiobutton navigable by keyboard tab key #31767

Dimitar

Participant

Hello Venu Gopal,

Here is a working example with tabindex = -1:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            $("#jqxRadioButton").jqxRadioButton({ width: 250, height: 25, checked: true, theme: theme });
            $("#jqxRadioButton2").jqxRadioButton({ width: 250, height: 25, theme: theme });
            $("#jqxRadioButton3").jqxRadioButton({ width: 250, height: 25, theme: theme });
            $("#jqxRadioButton4").jqxRadioButton({ width: 250, height: 25, disabled: true, theme: theme });
            var clearLog = function () {
                var log = $('#events').find('span');
                if (log.length >= 2) {
                    log.remove();
                }
            }
            $("#jqxRadioButton").on('change', function (event) {
                clearLog();
                var checked = event.args.checked;
                if (checked) {
                    $("#events").prepend('<div><span>Checked: 12 Months Contract</span></div>');
                }
                else $("#events").prepend('<div><span>Unchecked: 12 Months Contract</span></div>');
            });
            $("#jqxRadioButton2").on('change', function (event) {
                clearLog();
                var checked = event.args.checked;
                if (checked) {
                    $("#events").prepend('<div><span>Checked: 6 Months Contract</span></div>');
                }
                else $("#events").prepend('<div><span>Unchecked: 6 Months Contract</span></div>');
            });
            $("#jqxRadioButton3").on('change', function (event) {
                clearLog();
                var checked = event.args.checked;
                if (checked) {
                    $("#events").prepend('<div><span>Checked: 3 Months Contract</span></div>');
                }
                else $("#events").prepend('<div><span>Unchecked: 3 Months Contract</span></div>');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style='font-family: Verdana Arial; font-size: 12px; width: 400px;'>
        <h3>
            House Contract</h3>
        <div style='margin-top: 10px;' id='jqxRadioButton' tabindex="-1">
            12 Months Contract</div>
        <div style='margin-top: 10px;' id='jqxRadioButton2' tabindex="-1">
            <span>6 Months Contract</span></div>
        <div style='margin-top: 10px;' id='jqxRadioButton3' tabindex="-1">
            <span>3 Months Contract</span></div>
        <div style='margin-top: 10px;' id='jqxRadioButton4' tabindex="-1">
            <span>1 Month Contract</span></div>
        <div style='margin-top: 10px;'>
            <div>
                Events:
            </div>
            <div id='events'>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 2, 2013 at 3:59 am how to restrict jqxradiobutton navigable by keyboard tab key #31822

Venu Gopal

Participant

i’ve tried the example above,it is also not working. still iam able to navigate through keyboard tab.

November 4, 2013 at 5:37 am how to restrict jqxradiobutton navigable by keyboard tab key #31848

Dimitar

Participant

Hello Venu Gopal,

The example is working as expected on our side. Please share what browser you are using and its version. Also, please make sure you have the latest version of jQWidgets (3.0.4).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 4, 2013 at 11:20 am how to restrict jqxradiobutton navigable by keyboard tab key #31863

Venu Gopal

Participant

Thank you…
using the latest version of jQWidgets library solved the problem.

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.