JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<div id="rrBody">
    <div class="rrQuestionContainer"> <span class="mrQuestionText" style="">Thinking about the prospect(s) you hosted, what products would they be using, and what would the estimated revenue be from a relationship in 2015 and 2016? Your best estimate is fine.</span>  <span style=""><span class="mrQuestionTable" style="display:block; margin-left: 1em;"><span id="Cell.0.0" style=""></span></span>
        </span><span style=""><input type="checkbox" name="_QQ2H_C__01" id="_Q0_C0" class="mrMultiple" style=" margin-left: 1em; visibility: hidden;" value="__01" /> <label for="_Q0_C0"><span class="mrMultipleText" style="margin-left: -35px;">Product(s) the Guest Would be Using</span>

        </label> <span style=""> <input type="text" name="_QQ2H_O__01" id="_Q0_O0" class="mrEdit" autocomplete="on" style="" maxlength="1024" value="" /></span></span> <span id="Cell.0.1" style=""></span>

        <div> <span id="Cell.0.1" style=""></span>

        </div><span id="Cell.0.1" style=""><input type="checkbox" name="_QQ2H_C__02" id="_Q0_C1" class="mrMultiple" style=" margin-left: 1em; visibility: hidden;" value="__02" /> <label for="_Q0_C1"><span class="mrMultipleText" style="margin-left: -35px;">Enter Approximate Revenue from Work in 2015 and 2016</span>

        </label> <span style=""> <input type="text" name="_QQ2H_O__02" id="_Q0_O1" class="mrEdit" autocomplete="on" style="" maxlength="11" value="" /></span></span> <span id="Cell.0.2" style=""></span>

        <div> <span id="Cell.0.2" style=""></span>

        </div>
        <div class="mrMultiple styledCheckbox"> <span id="Cell.0.2" style=""><input type="checkbox" name="_QQ2H_CxNoneClear01" id="_Q0_C2" class="mrMultiple" style="margin-left: 1em;" value="xNoneClear01" /></span>

        </div><span id="Cell.0.2" style=""><label for="_Q0_C2"><span class="mrMultipleText" style="">Don't Know</span>

        </label>
        </span>
    </div>
    <div id="rrNavigation">
        <ul class="rr_nav">
           ...

JavaScript

//SPSS Disable Input onClick - Focus input onClick - (09-14-2015)
//http://stackoverflow.com/questions/23919384/jquery-set-focus-on-text-input-nearest-to-a-clicked-link
//http://stackoverflow.com/questions/9649877/how-to-disable-enable-input-field-on-click-with-jquery
//http://stackoverflow.com/questions/4113965/css-selector-for-text-input-fields
$('span.mrMultipleText').not($('span.mrMultipleText:last')).css("margin-left", "-35px");
$('input[type=checkbox], input[type=text]').on("click propertychange change mouseup", function () {
    if ($('div.styledCheckbox:last input[type=checkbox]').is(':checked')) {
        $('input[type=text]').prop('disabled', true).val('').addClass('disableType');
    } else {
        $('input[type=text]').removeAttr('disabled').removeClass('disableType');
        $(this).closest('span').find('input[type=text]').focus();
    }
});