条件标签颜色答案

【问题标题】：Conditional Label Color条件标签颜色
【发布时间】：2014-05-21 13:16:56
【问题描述】：

我正忙着让标签颜色发挥作用。简而言之，根据单选按钮的选择，以下表单字段要么被禁用，要么被启用。当它们被禁用时，我希望标签变灰。

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;

}

【问题讨论】：

标签： jquery forms colors

【解决方案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/

【讨论】：