Как показать различные диапазоны на основе выбора переключателя?

Question

Я пытаюсь отобразить конкретное сообщение диапазона на основе выбора переключателя. Кроме того, я хочу заблокировать выбор, как только пользователь сделает выбор. Итак, другими словами:

Я был в состоянии почти достичь такого эффекта, что я пытаюсь создать: http://jsfiddle.net/baumdexterous/HkFXs/1/

Но я не уверен, как сделать некорректное отображение детали на выбор для неправильной опции. Я все еще начинающий программист и не знаю, как заставить его работать. См. Мои JS и HTML ниже. Понравился бы понимание того, как сделать эту работу!

HTML

 <div id="wizard"> 



     <div id="space" style="width:810px; background:white; height:10px;"> 
     </div> 

     <div class="items"> 

      <!-- Question 1 --> 
      <div class="page one"> 
       <h2><strong>Question 1:</strong></h2> 
       <ul> 
        <li class="required double"> 
         <label> 
          <div class="qselections required"> 
           <input type="radio" value="a" name="question1">a) New York 
           <div id="questiononea"></div> 
           <br> 
           <input type="radio" value="b" name="question1">b) Washington DC 
           <br> 
           <input type="radio" value="c" name="question1">c) Seattle 
           <br> 
           <input type="radio" value="d" name="question1">d) Portland 
           <br> 
          </div> 
         </label> 
        </li> 
       </ul> 
       <li class="clearfix"> 
        <button type="button" class="next right">Proceed »</button> 
       </li> 
      </div> 

      </div> 

     </div><!--items--> 

     </div><!--wizard--> 

    </form> 

JavaScript

$(function() { 



     var root = $("#wizard").scrollable(); 
     var isRadioCheck = false; 
     // some variables that we need 
     var api = root.scrollable(), 
      drawer = $("#drawer"); 


      // prevent the user from making another selection once one radio option has been selected 
     $('input[type=radio]').click(function(){ $('input[type=radio]').prop('disabled',true); }); 

      // Show user correct answer 
     var appended = " <span id='qselectionsCORRECT' style='font-size:16px; line-height:16px;'>Correct</span>"; 
     appended.id = 'appended'; 

     $('input:radio[name="question1"]').change(
      function(){ 
       if ($(this).val() == 'a') { 
        $(appended).appendTo('#questiononea'); 
       } 
       else { 
        $(appended).remove(); 
       } 
      }); 

     // validation logic is done inside the onBeforeSeek callback 
     api.onBeforeSeek(function (event, i) { 

      // we are going 1 step backwards so no need for validation 
      if (api.getIndex() < i || $('input[type=radio]').is(':checked')) { 

       // 1. get current page 
       var page = root.find(".page,.qselections").eq(api.getIndex()), 

        // 2. .. and all required fields inside the page 
        inputs = page.find(".required :input").removeClass("error"), 

        // 3. .. which are empty 
        empty = inputs.filter(function() { 
         isRadioCheck = $('input[type=radio]').is(':checked'); 
         return $(this).val().replace(/\s*/g, '') == ''; 
        }); 



       //ealert('Empty Value is bool : ' + empty.length + isRadioCheck); 
       if (isRadioCheck) { 
        $('.qselections').removeClass("error"); 
        //alert('removed'); 
       } 
       // if there are empty fields, then 
       if (empty.length || !isRadioCheck) { 

        // slide down the drawer 
        drawer.slideDown(function() { 

         // colored flash effect 
         drawer.css("backgroundColor", "#fff"); 
         setTimeout(function() { 
          drawer.css("backgroundColor", "#fff"); 
         }, 1000); 
        }); 

        // add a CSS class name "error" for empty & required fields 
        empty.addClass("error"); 
        if (!isRadioCheck) $('.qselections').addClass("error"); 
        // cancel seeking of the scrollable by returning false 
        return false; 

        // everything is good 
       } else { 

        // hide the drawer 
        drawer.slideUp(); 
       } 

      } 

      // update status bar 
      $("#status li").removeClass("active").eq(i).addClass("active"); 

     }); 

     // if tab is pressed on the next button seek to next page 
     root.find("button.next").keydown(function (e) { 
      if (e.keyCode == 9) { 

       // seeks to next tab by executing our validation routine 
       api.next(); 
       e.preventDefault(); 
      } 
     }); 
    }); 

Но

Answer 1

Почему бы не исправить это с помощью CSS? С помощью JavaScript просто добавить истина/ложь (или что-то еще) класс для ваших входов, например:

<input type="radio" value="a" class="true" /> 
    <input type="radio" value="b" class="false" /> 

И с помощью CSS, используйте: после псевдо

input.true:after { 
    content:'Correct'; 
    color:green; 
} 
input.false:after { 
    content:'Incorrect'; 
    color:red; 
}