FLICKER FLICKER - 29 days ago 7
HTML Question

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

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?

Answer

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.