条件标签颜色

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

您的javascript有语法错误，并导致您的问题。下面是一个在change事件上禁用字段的示例。您应该能够将其扩展到您需要的任何字段。

$(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/