Question

如何通过单击带有JavaScript的单选按钮来禁用/启用选择选项？

<div class="form-group">
    <label class="control-label col-md-4 col-sm-3 col-xs-12">durian
    </label>
    <div class="col-md-5 col-sm-6 col-xs-12">
        <div class="col-md-1">
            <input type="radio" class="radio-button" name="fruit">
        </div>
        <div class="col-md-11">
            <select id="durian" class="form-control" style="width: 100%" name="durian">
                <option value="pilih" disabled selected>Pilih</option>
            </select>
        </div>
    </div>
</div>

<div class="form-group">
    <label class="control-label col-md-4 col-sm-3 col-xs-12">starfruit
    </label>
    <div class="col-md-5 col-sm-6 col-xs-12">
        <div class="col-md-1">
            <input type="radio" class="radio-button" name="fruit">
        </div>
        <div class="col-md-11">
            <select id="starfruit" class="form-control" style="width: 100%" name="starfruit">
                <option value="pilih" disabled selected>Pilih</option>
            </select>
        </div>
    </div>
</div>

抱歉我的英语不好。这是我的第一篇文章。希望您能够帮助我。谢谢

Answer 1

var $radio = $('input[name="fruit"]');
var $durianSelect = $('#durian');
var $starSelect = $("#starfruit");

$starSelect.prop('disabled', true);
$radio.on('change', function(e) {
 if ($(this).val() === 'durian') {
    $starSelect.prop('disabled', true);
    $durianSelect.prop('disabled', false)
 } else {
    $starSelect.prop('disabled', false);
    $durianSelect.prop('disabled', true);
 }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label class="control-label col-md-4 col-sm-3 col-xs-12">durian
    </label>
    <div class="col-md-5 col-sm-6 col-xs-12">
        <div class="col-md-1">
            <input type="radio" class="radio-button" name="fruit" value="durian" checked>
        </div>
        <div class="col-md-11">
            <select id="durian" class="form-control" style="width: 100%" name="durian">
                <option value="pilih" disabled selected>Pilih</option>
            </select>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-4 col-sm-3 col-xs-12">starfruit
    </label>
    <div class="col-md-5 col-sm-6 col-xs-12">
        <div class="col-md-1">
            <input type="radio" class="radio-button" name="fruit" value="starfruit">
        </div>
        <div class="col-md-11">
            <select id="starfruit" class="form-control" style="width: 100%" name="starfruit">
                <option value="pilih" disabled selected>Pilih</option>
            </select>
        </div>
    </div>
</div>

Answer 2

你可以尝试这个

你可以为每个id使用函数

    `https://jsfiddle.net/h34cp3gu/`

Answer 3

试试这个：

$(function() {
    $('.radio-button').on('change',function() {
        var pilih = $(this).val();
        $('select').not('#'+pilih).prop('disabled',true);
        $('#'+pilih).prop('disabled',false);
    });
});

小提琴：https://jsfiddle.net/ot5eq4ug/

如何根据带有JavaScript的单选按钮禁用/启用选择选项

3 个答案: