启用/禁用选择/下拉菜单和下拉单选按钮？

Question

I'm trying to Enable/Disable the Radio button and select/Dropdown on dropdown selected.

Jsfiddle link

Ex: If persons is selected only name="persons" (Anthony and Paul) and person dropdown must be available to select and Rest must be disabled

        <select class="browser-default" id="type" name="type">
        <option value="persons">persons</option>
        <option value="animals">animals</option>
        <option value="fruits">fruits</option>
        </select>

        <br/>

        <label><input type="radio" name="fruits" value="apple" id="apple" title="">Apple</label>
        <br/>
        <label><input type="radio" name="fruits" value="banana" id="banana" title="">Banana</label>
        <br/>

        <label><input type="radio" name="animals" value="dog" id="dog" title="">Dog</label>
        <br/>
        <label><input type="radio" name="animals" value="cat" id="cat" title="">Cat</label>
        <br/>


        <label><input type="radio" name="persons" value="anthony" id="anthony" title="">Anthony</label>
        <br/>
        <label><input type="radio" name="persons" value="paul" id="paul" title="">Paul</label>
        <br/>

        <select class="browser-default" id="persons1" name="persons">
        <option value="1">Person Dropdown</option>
        </select>
        <br/> 

        <select class="browser-default" id="animals1" name="animals">
        <option value="1">Animals Dropdown</option>
        </select>
        <br/> 

        <select class="browser-default" id="fruits1" name="fruits">
        <option value="1">Fruits Dropdown</option>
        </select>
        <br/> 

What I have tried:

Only Radio buttons without select/dropdown,

    $(document).ready(function() {
    $("select").change(function() {
        $("input").prop("checked", false);
        $("input").prop('disabled', false);
        $("input[type='radio']").prop("disabled", true);
        $("input[name='" + $(this).val() + "']").prop("disabled", false);
    }).trigger("change");
    })

Answer 1

You can loop through all radio button which have same name and enabled that radio button.Also,to enable select-box use $("select[name='" + $(this).val() + "']").prop("disabled", false); .

Demo Code :

 $(document).ready(function() { $("#type").change(function() { //disable other select $('select:not(#type)').prop("disabled", true); $("input").prop("checked", false); $("input").prop('disabled', false); $("input[type='radio']").prop("disabled", true); //looping through all inputs $("input[name='" + $(this).val() + "']").each(function(){ $(this).prop("disabled", false); //remove disable }) //remove disabled from slect $("select[name='" + $(this).val() + "']").prop("disabled", false); }).trigger("change"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <select class="browser-default" id="type" name="type"> <option value="persons">persons</option> <option value="animals">animals</option> <option value="fruits">fruits</option> </select> <br/> <label><input type="radio" name="fruits" value="apple" id="apple" title="">Apple</label> <br/> <label><input type="radio" name="fruits" value="banana" id="banana" title="">Banana</label> <br/> <label><input type="radio" name="animals" value="dog" id="dog" title="">Dog</label> <br/> <label><input type="radio" name="animals" value="cat" id="cat" title="">Cat</label> <br/> <label><input type="radio" name="persons" value="anthony" id="anthony" title="">Anthony</label> <br/> <label><input type="radio" name="persons" value="paul" id="paul" title="">Paul</label> <br/> <select class="browser-default" id="persons1" name="persons"> <option value="1">Person Dropdown</option> </select> <br/> <select class="browser-default" id="animals1" name="animals"> <option value="1">Animals Dropdown</option> </select> <br/> <select class="browser-default" id="fruits1" name="fruits"> <option value="1">Fruits Dropdown</option> </select> <br/>

Answer 2

 function disabled_all(){ $('input[name="fruits"],input[name="animals"],input[name="fruits"], select[name="persons"],select[name="animals"],select[name="fruits"]').prop('disabled', true); } disabled_all(); $('.browser-default').on('change', function () { var type = $(this).val(); disabled_all(); $('input[name="' + type + '"], select[name="' + type + '"]').prop('disabled', false); }).trigger('chnage');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="browser-default" id="type" name="type"> <option value="persons">persons</option> <option value="animals">animals</option> <option value="fruits">fruits</option> </select> <br/> <label><input type="radio" name="fruits" value="apple" id="apple" title="">Apple</label> <br/> <label><input type="radio" name="fruits" value="banana" id="banana" title="">Banana</label> <br/> <label><input type="radio" name="animals" value="dog" id="dog" title="">Dog</label> <br/> <label><input type="radio" name="animals" value="cat" id="cat" title="">Cat</label> <br/> <label><input type="radio" name="persons" value="anthony" id="anthony" title="">Anthony</label> <br/> <label><input type="radio" name="persons" value="paul" id="paul" title="">Paul</label> <br/> <select class="browser-default" id="persons1" name="persons"> <option value="1">Person Dropdown</option> </select> <br/> <select class="browser-default" id="animals1" name="animals"> <option value="1">Animals Dropdown</option> </select> <br/> <select class="browser-default" id="fruits1" name="fruits"> <option value="1">Fruits Dropdown</option> </select> <br/>