Как отключить текстовые поля в переключателе с помощью Javascript

Question

Как отключить текстовые поля в переключателе с помощью Javascript

0

Моя функция

Если я выберу первый (второй или последний) вариант, опция останова будет отключена и сброшена как null, и все значения в выбранном параметре будут включены в качестве моего Javascript ниже.
Более того, я хотел бы отключить текстовые поля как левую сторону ниже всякий раз, когда выбран вариант taxi.

Demo

HTML:

<table>
<tr>
    <td>
        <input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="radio" name="abc" value="car" />Car</td>
    <td>
        <input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
        <input type="checkbox" />Taxi</td>
</tr>
</table>

Javascript:

var rbt_vehicle = $("input[name=vehicle]");

$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;

$('#' + valueSelected).find(':text').prop('disabled', false).val('').removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true);
});

PMay 1903 09 май 2014, в 18:07

Источник

Теги:

javascript

jquery

2 ответа

2

сделайте вот так:

$('input.rdo').click(function(){
if(this.id == 'rdoTaxi')
{
    $('.textbox').prop('disabled',true);
}
    else
    {
        $('.textbox').prop('disabled',false);
    }

});

Fiddle DEMO

Ehsan Sajjad 09 май 2014, в 12:49

0

Спасибо за ваш код, но я хотел бы добавить их в свою текущую функцию с Javascript ...
PMay 1903 09 май 2014, в 15:26
1

Вы сделали эту простую задачу очень сложной, поэтому я упростил ее ..
Ehsan Sajjad 09 май 2014, в 15:29
0

@EhsanSajjad +1 вы можете привести лошадь к воде ...
wvandaal 09 май 2014, в 15:29
0

@wvandaal, что ты имеешь в виду под этим?
Ehsan Sajjad 09 май 2014, в 15:30
0

@EhsanSajjad, это обычная идиома, в основном в этом случае это означает, что вы можете показать ОП лучше, но вы не можете заставить его увидеть, что это лучше.
wvandaal 09 май 2014, в 15:33
0

Я отредактировал свою ветку и хотел бы сохранить свой текущий код JS, а затем добавлять код «отключенное текстовое поле» всякий раз, когда выбрано taxi ...
PMay 1903 09 май 2014, в 15:37

Показать ещё 4 комментария

Ещё вопросы

Спасибо за ваш код, но я хотел бы добавить их в свою текущую функцию с Javascript ...
Вы сделали эту простую задачу очень сложной, поэтому я упростил ее ..
@EhsanSajjad +1 вы можете привести лошадь к воде ...
@wvandaal, что ты имеешь в виду под этим?
@EhsanSajjad, это обычная идиома, в основном в этом случае это означает, что вы можете показать ОП лучше, но вы не можете заставить его увидеть, что это лучше.
Я отредактировал свою ветку и хотел бы сохранить свой текущий код JS, а затем добавлять код «отключенное текстовое поле» всякий раз, когда выбрано taxi ...

wvandaal · Accepted Answer · 2014-05-09T12-41-00.000Z

1

Лучший ответ

Используя текущую функцию, вы можете фактически удалить много текущего кода и просто сделать следующее:

var rbt_vehicle = $("input[name=vehicle]");

$(rbt_vehicle).on('change', function (e) {
    var valueSelected = this.value;

    // your other code here ...

    $('input[type="text"]').prop('disabled', valueSelected === 'taxi');

});

DEMO

wvandaal 09 май 2014, в 12:41

0

Я отредактировал свою ветку и хотел бы сохранить свой текущий код JS, а затем добавлять код «отключенное текстовое поле» всякий раз, когда выбрано taxi ...
PMay 1903 09 май 2014, в 15:38
1

@ PMay1903 хорошо в этом случае, просто добавьте следующую строку в существующую функцию: $('input[type="text"]').prop('disabled', valueSelected === 'taxi'); и это должно сделать это
wvandaal 09 май 2014, в 15:50
0

Большое спасибо. Это хорошо работает сейчас :-) Мне интересно, что я должен поставить ваш код выше или ниже моего кода?
PMay 1903 09 май 2014, в 15:59
0

@ PMay1903, это зависит от того, что вы собираетесь делать. Если остальная часть вашего кода не зависит от того, были ли текстовые поля отключены или включены, вы можете поместить их где угодно, если у вас есть логика, которая зависит от отключенного состояния ваших текстовых полей, тогда вам нужно поставить эту строку выше код.
wvandaal 09 май 2014, в 16:03
0

Я понял. Еще раз спасибо за ваше объяснение!
PMay 1903 09 май 2014, в 16:06

Показать ещё 3 комментария