时间戳

首页 > 解决方案 > how to disable dropdowns as default on radio button which checked first?

jquery - how to disable dropdowns as default on radio button which checked first?

问题描述

I want capacity and supplier drop down disabled as default because radio button inside is checked. now i can only disable capacity and supplier drop down when click on radio button inside. can anyone help me?

Thank you

Html code:-

<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>

Script:-

$(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');
    });

});

标签： jqueryhtml

解决方案

您需要做的就是将属性 disabled 添加到两个 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">

推荐阅读