asked on

jQuery - Remove and Add class to fieldset

Hi,

How would I change the bottom example to the to example?

these have work toward the goal
$('#P11_TOTAL_SPEND_RATING').children().removeAttr("name");
$('#P11_TOTAL_SPEND_RATING').children().addClass( "star-rating-readonly" );
$('#P11_TOTAL_SPEND_RATING').children().prop("disabled", true);

BUT this does not work:
$('div #P11_TOTAL_SPEND_RATING').children().removeClass('star-rating-live').addClass('star-rating-readonly');

	READONLY by Item on render
	<fieldset id="P11_TOTAL_SPEND_RATING">
	<span class="star-rating-control">
	<div class="rating-cancel" style="display: none;"><a title="Clear Rating"></a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-readonly" id="P11_TOTAL_SPEND_RATING_1"><a title="1">1</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-readonly" id="P11_TOTAL_SPEND_RATING_2"><a title="2">2</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-readonly" id="P11_TOTAL_SPEND_RATING_3"><a title="3">3</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-readonly" id="P11_TOTAL_SPEND_RATING_4"><a title="4">4</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-readonly" id="P11_TOTAL_SPEND_RATING_5"><a title="5">5</a></div>
	</span>
	<input type="radio" id="P11_TOTAL_SPEND_RATING_1" value="1" title="1" disabled="disabled" class="star-rating-applied star-rating-readonly" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_2" value="2" title="2" disabled="disabled" class="star-rating-applied star-rating-readonly" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_3" value="3" title="3" disabled="disabled" class="star-rating-applied star-rating-readonly" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_4" value="4" title="4" disabled="disabled" class="star-rating-applied star-rating-readonly" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_5" value="5" title="5" disabled="disabled" class="star-rating-applied star-rating-readonly" style="display: none;">
	</fieldset>

Open in new window

	<fieldset id="P11_TOTAL_SPEND_RATING">
	<span class="star-rating-control">
	<div class="rating-cancel" style=""><a title="Clear Rating"></a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-live" id="P11_TOTAL_SPEND_RATING_1"><a title="1">1</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-live" id="P11_TOTAL_SPEND_RATING_2"><a title="2">2</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-live" id="P11_TOTAL_SPEND_RATING_3"><a title="3">3</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-live" id="P11_TOTAL_SPEND_RATING_4"><a title="4">4</a></div>
	<div class="star-rating rater-0 star-rating-applied star-rating-live" id="P11_TOTAL_SPEND_RATING_5"><a title="5">5</a></div>
	</span>
	<input type="radio" id="P11_TOTAL_SPEND_RATING_1" value="1" title="1" name="p_t42" class="star-rating-applied" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_2" value="2" title="2" name="p_t42" class="star-rating-applied" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_3" value="3" title="3" name="p_t42" class="star-rating-applied" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_4" value="4" title="4" name="p_t42" class="star-rating-applied" style="display: none;">
	<input type="radio" id="P11_TOTAL_SPEND_RATING_5" value="5" title="5" name="p_t42" class="star-rating-applied" style="display: none;">
	</fieldset>

Open in new window

BILL Carlisle

ASKER

Help, anyone?

ASKER CERTIFIED SOLUTION

BILL Carlisle

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

There are several issues here

1. You have duplicate ID's in your markup - this is not valid

2. What are you trying to achieve - depending on what you are wanting to do - there are several different ways of solving this.

Firstly, this line

$('div #P11_TOTAL_SPEND_RATING').children().removeClass('star-rating-live').addClass('star-rating-readonly');

a) You don't need the div qualifier at the front of the selector - the # refers to an ID which should be unique

b) The .children() method will return only the immediate children of the selector - in this case the <span> and the 5 inputs. Based on your example you want to change the div's with the star-rating-live class - but these are grandchildren of P11_TOTAL_SPEND_RATING so will not be returned in the .children() call.

If you want to change the class on the div's in the P11_TOTAL_SPEND_RATING fieldset the following should do it for you

$('#P11_TOTAL_SPEND_RATING .star-rating-live').addClass('star-rating-readonly').removeClass('star-rating-live');

Open in new window