조건부 레이블 색상

Question

레이블 색상을 적용하려고하는 짐승을 보내고 있습니다. 간단히 말해, 라디오 버튼 선택에 따라 다음 양식 필드가 비활성화되거나 활성화됩니다. 라벨이 비활성화되면 레이블이 회색으로 표시됩니다.

HTML :

<input type="radio" name="Event-Location" value="City2">City 2</input> 
<input type="radio" name="Event-Location" value="City1">City 1</input> 
<label for="Reservation-Style"> Reservation Style:</label> 
<select name="Reservation-Style" id="Reservation-Style"> 
    <option>- Style -</option> 
    <option value="Permits">Individual Permits</option> 
    <option value="Cordon">Cordoned Parking Area</option> 
</select> 
<label for="Number-Permits-Needed">How Many Permits are needed? </label> 
<input id="Number-Permits-Needed" class="text" type="text" name="Number-Permits-Needed" size="15" /> 

JS :

$(document).ready(function() { 
    $('input:radio[name=Event-Location]').click(function() { 
     var checkval = $(this).val(); 
     $('#Reservation-Style, [for="Reservation-Style"]').prop('disabled', !(checkval == 'City2')).addClass('disabled'); 
     $('#Reservation-Style, [for="Reservation-Style"]').prop('enabled', !(checkval == 'City1')).removeClass('disabled'); 
     $('#Number-Permits-Needed, label[for="Number-Permits-Needed"]').prop('disabled', !(checkval == 'City2')).addClass('disabled'); 
     $('#Number-Permits-Needed, label[for="Number-Permits-Needed"]').prop('enabled', !(checkval == 'City1')).removeClass('disabled'); 
    }); 

}); 

그리고 CS :

.disabled { 
    color: #666; 

} 

Answer 1

자바 스크립트 구문 오류를 가지고 있으며, 여러분의 문제를 일으키는. 다음은 변경 이벤트에서 필드가 비활성화 된 경우의 예입니다. 필요한 필드를 확장 할 수 있어야합니다.

$(document).ready(function() { 
$('input[name="Event-Location"]').on('change', function() { 
    var checkval = $(this).val(); 
    if (checkval == 'City1') { 
     $('label[for="Reservation-Style"]').addClass('disabled'); 
     $('#Reservation-Style').prop('disabled', 'disabled'); 
     $('label[for="Number-Permits-Needed"]').addClass('disabled'); 
     $('#Number-Permits-Needed').prop('disabled', 'disabled'); 
    } else { 
     $('label[for="Reservation-Style"]').removeClass('disabled'); 
     $('#Reservation-Style').prop('disabled', false); 
     $('label[for="Number-Permits-Needed"]').removeClass('disabled'); 
     $('#Number-Permits-Needed').prop('disabled', false); 
    } 
}); 
});  

바이올린 : http://jsfiddle.net/faithfulprogrammer/sBpYm/3/