?
Solved

jQuery: how to change the label of this radio box

Posted on 2011-04-21
8
Medium Priority
?
595 Views
Last Modified: 2012-05-11
Hi experts,

There is a check box "A" and radio button "B". Button "B" has a label of "View in browser".  If box "A" is checked, I want the label of "View in browser" to become to color green. The label's original color is black.

Attached is related jQuery script. Can anybody tell me how to do this?

Thanks so much.
<input name=outputFormat type="radio"  id="browser" value='browser'   <c:if test="${outputFormat == 'browser'}">checked</c:if>  <c:if test="${subidCheck=='subid'}">disabled</c:if> />View in browser


-------------------------------------------
When checkbox "A" is checked, the following module is called. 

     if (textInput == 'subid')
        {
                $('#csv').attr('checked', 'checked');
                $('#browser').attr('disabled', 'disabled');

                // this is not correct. How to write this? 
                $('#browser').titleLabel.textColor = [UIColor greenColor];


        }

Open in new window

0
Comment
Question by:davidw88
  • 4
  • 3
8 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 35445885
Using :

<input name=outputFormat type="radio"  id="browser" value='browser'   <c:if test="${outputFormat == 'browser'}">checked</c:if>  <c:if test="${subidCheck=='subid'}">disabled</c:if> /><span id="titleLabel">View in browser</span>

Open in new window


You may use :

$("#titleLabel").css({"color":"green"});

Open in new window

0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 35447180
How about something like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>


<title>Untitled Page</title>
<style>
	html {font-family: Arial;}

	}
</style>
	<input name="outputFormat" type="radio"  id="browser" value="browser" checked /><label for="browser">View in Browser</label>
	<input name="outputFormat" type="radio"  id="csv" value="csv" /><label for="csv">View CSV</label>
</head>
<body>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
    	//fire the toggle function after the page loads the first time.  This will allow you to set the checked value
    	//with code-behind and not have to do anything extra in terms of jquery
		labelBack()

		//wire up a change event on the radio inputs
		$("input[name=outputFormat]").change(function(){
			labelBack()
		})
    })

	function labelBack() {
		//determine whether the browser radio is checked.  Set a color variable
		//as appropriate
		var bgColor = ($("#browser").attr("checked")) ? "green" : "#fff" ;

		//change the label background of the browser input's label
		$("#browser").next().css({"background-color" : bgColor})
	}

</script>
</body>
</html>

Open in new window

0
 

Author Comment

by:davidw88
ID: 35449892
Thanks experts for your replies. I tried your suggestions besides others (refer to the attached script), however none of them changed that label's color.

Any more suggestions?

Thanks a lot.


if (textInput == 'subid')
        {
                var bgColor = ($("#browser").attr("checked"))? "#000000":"green";

                $("#browser").css({"background-color" : bgColor});

                $("#browser").css("background-color","yellow");
                 $('#browser').next().css('color', 'green');

$("#browser").css({"color":"green"});

                // the following two lines work correctly
                $('#csv').attr('checked', 'checked');
                $('#browser').attr('disabled', 'disabled');

          }

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:Steve Krile
ID: 35449927
The code you attached to your last post has syntax problems.  There are missing symbols and redundancies.  Did you run my code stand-alone?  It does precisely what you want.  Then you can work it back in to your "real" code.
0
 

Author Comment

by:davidw88
ID: 35449928
Just found why it did not work... I forgot "<label for="browser">View in Browser</label>"!

Now it works. Thanks skrile!

Let me do a little more tests.
0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 1000 total points
ID: 35449953
From my example, and for clarity:

$("#browser")   will select the radio input element.
$("#browser").next()  will select the VERY next html element from the browser input.  In this case, a Label.

0
 

Author Comment

by:davidw88
ID: 35450224
Works perfect!   I increase the points to 250 in order to show my appreciation for your help.

Thanks skrile. You have a great weekend.
0
 
LVL 16

Expert Comment

by:Steve Krile
ID: 35450234
My pleasure.  Thanks!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article discusses how to implement server side field validation and display customized error messages to the client.
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question