jQuery将基于id的元素更改为其他类

Question

I am trying to grey out the Finish button in jquery steps (like the Previous button in the image below, for steps 1 and steps 2 in my wizard. The third and final step will enable the Finish button.

I thought the best approach is to set

enableFinishButton: true 

so it is available for manipulation.

I inspected the grayed out 'Previous' button in chrome editor and I saw this:

It seems to me that I want the id="finish_button" to appear in the

<li class = "disabled" aria-disabled="true"> 

along with the Previous button in Step 1, and remain there in Step 2, then move to

  <li class = "aria-hidden ="false"" aria-disabled="false">

in Step 3. It would also be nice to move the Next button to

  <li class = "disabled" aria-disabled="true"> 

in that third and final step.

I have no idea how to move an element by id around these different classes based on user clicks.

Thanks for any help anyone can provide.

Tom

Answer 1

I have some examples of what I think you are looking for:

// move an element to another element

$("#finish_button").appendTo("li.disabled");

// or leave element where it is and change attributes and classes

$("li[aria-hidden='false']").attr("aria-disabled","true");
$("li[aria-hidden='false']").addClass("disabled");

// set up onclick events for the buttons to make these types of changes

$("#next_button").click(function() { 
  // code to run when next is clicked
  // like enable finish button, disable next button.
  $("li.disabled").removeClass("disabled");
});

These may not be the exact selectors you will need to use, depending on if there could be other li elements on the page with similar attributes.

The onclick and href can work together as long as the click function does not return false, or run preventDefault() on the click event.

I hope it helps.