Disable a radiobuttonlist item with JS or JQ

Hi

I have a radioButtonList, that is being populated server side.

There is a temp requirement to disable 1 of the options. There is no config for this so I'm looking to identify the element in the list and either hide it or disable it with JS or JQ

Can anyone offer any help?

Andy
LVL 3
Andy GreenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sam JacobsDirector of Technology Development, IPMCommented:
Can you share the HTML of the radiobutton list?
Swatantra BhargavaTechnical Specialist/DeveloperCommented:
Can you paste your HTML code here?
Andy GreenAuthor Commented:
I have this function on the page load with seems to work except it leaves a gap in the list, OK I guess as its a temp requirement:

            function hideOptions() {
               
            var list = document.getElementById('rblAttendStatus');
            list.getElementsByTagName('input')[3].nextSibling.style.display = 'none';
            list.getElementsByTagName('input')[3].style.display = 'none';

        }


This is the HTML from the page source - Sorry its a dump.

<span id="rblAttendStatus"><span class="aspNetDisabled"><input id="rblAttendStatus_0" type="radio" name="rblAttendStatus" value="1" checked="checked" disabled="disabled" /><label for="rblAttendStatus_0">list Item 1</label></span><br /><span><input id="rblAttendStatus_1" type="radio" name="rblAttendStatus" value="2" /><label for="rblAttendStatus_1">list Item 2</label></span><br /><span><input id="rblAttendStatus_2" type="radio" name="rblAttendStatus" value="4" /><label for="rblAttendStatus_2">list Item 3</label></span><br /><span><input id="rblAttendStatus_3" type="radio" name="rblAttendStatus" value="5" /><label for="rblAttendStatus_3">list Item 4</label></span><br /><span><input id="rblAttendStatus_4" type="radio" name="rblAttendStatus" value="6" /><label for="rblAttendStatus_4">list Item 5</label></span><br /><span><input id="rblAttendStatus_5" type="radio" name="rblAttendStatus" value="7" /><label for="rblAttendStatus_5">list Item 6</label></span><br /><span class="aspNetDisabled"><input id="rblAttendStatus_6" type="radio" name="rblAttendStatus" value="8" disabled="disabled" /><label for="rblAttendStatus_6">list Item 7</label></span></span>


Andy
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

Sam JacobsDirector of Technology Development, IPMCommented:
Since you're using jQuery:
$('input[type=radio]:eq(3)').attr('disabled', true); 

Open in new window

Andy GreenAuthor Commented:
How does that target the rbl control?

A
Sam JacobsDirector of Technology Development, IPMCommented:
It targets the 4th radiobutton on the page.
If you don't have any others, it should work just fine.
Sam JacobsDirector of Technology Development, IPMCommented:
Since they each have their own ID, you can use this instead, which will work even with other radiobuttons on the page:
$('#rblAttendStatus_3').attr('disabled', true); 

Open in new window

Andy GreenAuthor Commented:
OK thanks, needs to be more specific, there are radios on other tabs. Its quite a large page.

A
Julian HansenCommented:
Some points
1. don't use attr() - rather use prop() there is a distinct difference between these two.

2. A note on your function - this is not efficient - no need to call getElementsByTagName twice
 list.getElementsByTagName('input')[3].nextSibling.style.display = 'none';
 list.getElementsByTagName('input')[3].style.display = 'none';

Open in new window

Rather
var inputs = list.getElementsByTagName('input');
// Now use inputs

Open in new window


3. nextSibling on the input is going to be a text node because you have white space between the <input> and the label.
For example
	<span>
		<input id="rblAttendStatus_3" type="radio" name="rblAttendStatus" value="5" />
		<label for="rblAttendStatus_3">list Item 4</label>
	</span><br />
	<span>

Open in new window

.nextSibling on the input is going to find the '\r\n    ' after the closing /> of the input. This is not the same as this
	<span>
		<input id="rblAttendStatus_3" type="radio" name="rblAttendStatus" value="5" /><label for="rblAttendStatus_3">list Item 4</label>
	</span><br />
	<span>

Open in new window

Where .nextSibling will be the label

4. Why is it leaving a space? Let's look at your code again
	<span>
		<input id="rblAttendStatus_3" type="radio" name="rblAttendStatus" value="5" />
		<label for="rblAttendStatus_3">list Item 4</label> <!--- YOU ARE HIDDING THIS -->
	</span><br /> <!-- NOT THIS -->
	<span>

Open in new window

Do you notice the containing <span> with the <br> - that is not getting hidden because you are hiding the label - so you will get a space.

If you are wanting to hide the fourth radio button (I am assuming this is the requirement) then
a) Change your markup to use <div>'s instead of <span> and lose the <br> - using inline elements with a <br> to emulate a block element is not a great idea.
And change your function to
function hideOptions() {
	var list = document.getElementById('rblAttendStatus');
	list.getElementsByTagName('div')[3].style.display = 'none';
}

Open in new window

b) If you can't change the markup then make the span's block elements and hide the <br>'s
You can do this with the following CSS
#rblAttendStatus span {
	display: block;
}
#rblAttendStatus span + br {
	display: none;
}

Open in new window

and change your function to
function hideOptions() {
	var list = document.getElementById('rblAttendStatus');
	list.getElementsByTagName('span')[3].style.display = 'none';
}

Open in new window


I prefer option 1 - it is the right markup for this and does not require a CSS hack, but either way you want to make your list items block elements and hide the container.

Here is a sample that uses the styled <span> option.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Andy GreenAuthor Commented:
Thank you Julian. Learned a lot form your response. Thanks also to the other for your time.

Andy
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.