HTML Javascript

<html>
  <head>
    <title>LS User Acceptance Test Configurator</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>


  <body style="margin: 20px">


    <div class="container">
    <form action="/test_configurator_kerstner/index.cgi" method="GET" class="form-inline" role="form">
         <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" value="[% newname %]" name="newname" class="form-control" id="name" placeholder="Enter name">
         </div>
         <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" value="[% newemail %]" name="newemail" class="form-control" id="email" placeholder="Enter email">
         </div>
         <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="text" value="[% newpass %]" name="newpass" class="form-control" id="pass" placeholder="Enter password">
         </div>
         <input type="submit" value="New User" class="btn btn-primary btn-info">
    </form>
    </div>


    <form action="/test_configurator_kerstner/index.cgi" method="GET">
    <div class="form-group">
        <label for="host">Host:</label>
        <input type="text" class="form-control" name="host" value="[% host %]">  <br>
    </div>

    <table id="myTable" class="table table-bordered table-condensed table-hover table-striped" >

    <tr>
        <td>Tests\User(s)</td>
        [% FOREACH user IN users %]
        <td data-username="[% user.name %]"><p align="center">[% user.name %]</p></td>
        [% END %]
    </tr>

    [% FOREACH test IN tests %]
        [% FOREACH testMethod IN test.testMethods %]
        <tr>
            <td data-testmethodname="[% test.name %].[% testMethod %]"><b>[% test.name %]</b> [% testMethod.name %]</td>
            [% FOREACH user IN users %]
            <td align="center"> Run: <input type="checkbox" id="[% test.name %]_[% user.name %]_run" name="expectedResult[[% test.name %]][run][[% user.name %]]" [% IF expectedResults.${test.name}.run.${user.name} %]checked[% END %]/> </td>
            [% END %]
        </tr>

            <td data-testmethodname="[% test.name %].shouldSucceed">shouldSucceed</td>
            [% FOREACH user IN users %]
            <td align="center"><input type="checkbox" id="[% test.name %]_[% user.name %]_-shouldSucceed" name="expectedResult[[% test.name %]][[% testMethod.name %]][shouldSucceed][[% user.name %]]" [% IF expectedResults.${test.name}.${testMethod.name}.shouldSucceed.${user.name} %]checked[% END %]/></td>
            [% END %]

            [% FOREACH parameter IN testMethod.parameters %]
            <tr>
                <td data-parametername="[% test.name %].[% testMethod.name %].[% parameter %]">[% parameter %]</td>
                [% FOREACH user IN users %]
                <td align="center"><input type="checkbox" id="[% test.name %]_[% user.name %]_-[% parameter %]" name="expectedResult[[% test.name %]][[% testMethod.name %]][[% parameter %]][[% user.name %]]" [% IF expectedResults.${test.name}.${testMethod.name}.${parameter}.${user.name} %]checked[% END %]/></td>
                [% END %]
            </tr>

            [% END %]

        [% END %]
    [% END %]
    </table>


    <input type="submit" value="Submit" class="btn btn-primary">
    </form>


<script>
$(document).ready(function()
{
    var runElements = $("[id*='run']");
    for (i=0; i<runElements.size(); i++)
    {
        if (!runElements.eq(i).prop('checked'))
        {
            var str = (runElements.eq(i)).attr('id');
            var splitting = str.split("_", 2);
            var testname = splitting[0]+"_"+splitting[1]+"_-";
            $("[id*="+testname+"]").prop( "disabled", true );
        }
    }

    $("input[name*='[run]']").click(function()
    {
            var str = $(this).attr('id');
            var splitting = str.split("_", 2);
            var testname = splitting[0]+"_"+splitting[1]+"_-";
            var checkbox = $("[id*="+testname+"]");
            checkbox.prop( "disabled", !checkbox.prop("disabled") );
    });
});
</script>


  </body>
</html>