Can't create checkboxradio on element.nodeName=input and element.type=text

Question

I have following html and when I preview the page, I get following error:

Can't create checkboxradio on element.nodeName=input and element.type=text

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("input").checkboxradio();
        });
    </script>
</head>
<body>
    <form action="#">
        <label for="cbxForRent">For Rent</label>
        <input type="checkbox" id="cbxForRent" />
        <input type="text" id="txtZipCode" />
    </form>
</body>

If I remove

<input type="text" id="txtZipCode" />

it will work properly. I think jquery tries to do something with the textbox.

what is the best way to resolve this issue?

adeneo · Accepted Answer · 2016-11-11 22:22:37Z

13

The jQuery UI checkboxradio plugin works on checkboxes with a label only, not on text inputs, and $('input') targets both tags, make sure you target the checkbox only, and jQuery UI will no longer throw the error when it tries to convert a text input into a radiobutton

$(function () {
    $("#cbxForRent").checkboxradio();
});

You could also target all checkboxes on the page with

$('input[type="checkbox"]')

or give them a common class to target them etc.

edited Nov 11, 2016 at 22:22

answered Nov 11, 2016 at 22:14

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

FLICKER Over a year ago

So I have to do that for all checkboxes? can I add a class for my checkboxes and apply on only that class?

adeneo Over a year ago

@FLICKER - you can target them anyway you want, like $('input[type="checkbox"]') or give the elements you want to convert a common class. I just used an ID, as that's what you had, the important thing is to not target all inputs, as that includes inputs that aren't checkboxes

FLICKER Over a year ago

the solution you provided in answer, works but the one in comment which looks like a better solution, is not working. I tried $(input[type = "checkbox"]).checkboxradio();

adeneo Over a year ago

Should work fine, but it looks like I forgot the quotes, I've added them now

Heretic Monkey Over a year ago

Or the old standby $('input:checkbox')....

Collectives™ on Stack Overflow

Can't create checkboxradio on element.nodeName=input and element.type=text

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related