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存在语法错误，导致您的问题。以下是针对您在更改事件中禁用字段的情况的示例。您应该可以根据需要扩展它。

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

条件标签颜色

1 个答案: