Question

我希望默认禁用容量和供应商下拉列表，因为选中了内部的单选按钮。现在，当我单击内部的单选按钮时，只能禁用容量，并且供应商下拉列表。有人可以帮我吗？

谢谢

HTML代码：-

<div class="form-group">
    <div class="col-sm-8">
        <div class="col-md-2">
            <label>
                <input type="radio" name="RA_type" value="I" checked/>  Inside  
            </label>
        </div>          
        <div class="col-md-2">
            <label>
                <input type="radio" name="RA_type" value="O" />  Outside  
            </label>
        </div>
    </div>

    <div class="form-group">
        <label for="Serial_number" class="col-sm-2 control-label">Serial number</label>       
        <div class="col-sm-8">
            <select id="generator_id_fk" name="generator_id_fk" class="form-control pull-right select2" >
                <option value="">---- Please Select Serial number ---</option>
                <option value="1">7888</option>
                <option value="2">8444</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="Supplier_Capacity" class="col-sm-2 control-label">Supplier & Capacity</label>

        <div class="col-sm-4">
            <select id="supplier_id_fk"  name="supplier_id_fk" class="form-control pull-right select2">
                <option value="">--- Please Select Supplier ----</option>
                <option value="1">Ram</option>
                <option value="2">Ravi</option>
            </select>
        </div>

        <div class="col-sm-4">
            <select id="capacity_id_fk" name="capacity_id_fk" class="form-control pull-right select2" >
                <option value="">--- Please Select Capacity--- </option>
                <option value="1">jayan</option>
                <option value="2">kamal</option>
            </select>
       </div>
    </div>

脚本：-

$(document).ready(function () {
    $('input[value="I"]').on('ifClicked', function (event) {
        document.getElementById("supplier_id_fk").setAttribute('disabled', true);
        document.getElementById("capacity_id_fk").setAttribute('disabled', true);
        document.getElementById("generator_id_fk").removeAttribute('disabled')
    });

    $('input[value="O"]').on('ifClicked', function (event) {
        document.getElementById("generator_id_fk").setAttribute('disabled', true);
        document.getElementById("supplier_id_fk").removeAttribute('disabled');
        document.getElementById("capacity_id_fk").removeAttribute('disabled');
    });

});

Answer 1

您需要做的就是将禁用的属性添加到两个select元素的两个声明中，如下所示：

<select id="supplier_id_fk" name="supplier_id_fk" class="form-control pull-right select2" disabled="disabled">

和

<select id="capacity_id_fk" name="capacity_id_fk" class="form-control pull-right select2" disabled="disabled">

如何禁用首先选中的单选按钮上的默认下拉菜单？

1 个答案: