混合使用Javascript和HTML与可维护的代码

Question

I have a form with 100+ form controls. My problem is that the form requires non-trivial logic to determine which form controls to hide, show, disable, etc. Right now I have several if-then-else structures in several event handlers that are a nightmare to maintain/update. I have been dabbling in AngularJS and thought I might be able to use something like ng-hide in my JQuery based form. Just to be clear I don't want to switch to AngularJS.

My main questions are: Is this a safe way to use eval() ? Is there a better way to achieve my goal, while keeping maintainability in mind?

HTML

 <button type="button" ng-show="_isRefill" value="">Test1</button>
 <button type="button" ng-show="_hasChanges || _isRefill" value="">Test2</button>

JQuery

function test()
{

  var _isRefill = true;
  var _hasChanges = false;  

  //There about 10 of these Booleans that control what to show/hide/etc
  //Each DOM element could have it's own unique combination of 10 Booleans that control it  
  //Note that Button #2 has logic in the HTML markup 

  var $this = $(this);

  if( !eval($this.attr('ng-show')) )
    $this.addClass('ignore');
  else 
    $this.removeClass('ignore');

}

$('button').on('click',test);

The code inside the ng-show attribute is echoed from the server so I don't think I will have an XSS problem, but I could be wrong.

I have considered using something like the observer pattern, but I don't want to create and keep track of a ton of IDs. Also, a lot of my DOM elements are dynamically generated which would make maintaining the subject lists a pain.

Edit

Here is an example use case of the form. I took a screenshot of the same section of the form at different states.

Case 1 The radio buttons labeled by "Yes, This is a waiver" and "No, This is not a waiver" determine whether "Waiver Email" and "Business Case" are shown.

Case 2 User selects Refill, With Changes, Temporary(TMP) and then is allowed to choose the options from case 1 to show/hide the Waiver section.

Case 3 User selects New Position, Intermittent and the Waiver section is forced to Yes and locked.

These are rather simple cases but normally other form controls further down the page can show/hide/disable entire sections or individual form controls. As you can see there are cases where showing/hiding each control has exceptions and overlapping cases.

Answer 1

Copying part of the AngularJS library is a distinct possibility and you could even generalise by using JQuery to select all of the elements that have a ng-show attribute and adding event listeners to add and remove classes.

But you have to consider whether it's worth reinventing part of a very nice, shiny wheel that will definitely give you the result you're after. Maintainability often comes from creating or using a framework, such as Angular JS (I prefer React), that can be reused time and time again before you even attempt to create something specific.