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

Question

我正在尝试启用/禁用单选按钮并在选择的下拉列表中选择/下拉。

Jsfiddle 链接

例如：如果persons仅被选中name="persons"（Anthony 和 Paul）并且person dropdown必须可供选择并且必须禁用 Rest

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

我试过的：

只有单选按钮没有选择/下拉，

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

&nbsp;function disabled_all(){&nbsp; $('input[name="fruits"],input[name="animals"],input[name="fruits"], select[name="persons"],select[name="animals"],select[name="fruits"]').prop('disabled', true);&nbsp; }&nbsp;&nbsp;disabled_all();&nbsp;&nbsp;$('.browser-default').on('change', function () {&nbsp; &nbsp; var type = $(this).val();&nbsp; &nbsp; disabled_all();&nbsp; &nbsp; $('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">&nbsp; &nbsp; &nbsp; &nbsp; <option value="persons">persons</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="animals">animals</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="fruits">fruits</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <label><input type="radio" name="fruits" value="apple" id="apple" title="">Apple</label>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <label><input type="radio" name="fruits" value="banana" id="banana" title="">Banana</label>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <label><input type="radio" name="animals" value="dog" id="dog" title="">Dog</label>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <label><input type="radio" name="animals" value="cat" id="cat" title="">Cat</label>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <label><input type="radio" name="persons" value="anthony" id="anthony" title="">Anthony</label>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <label><input type="radio" name="persons" value="paul" id="paul" title="">Paul</label>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; <select class="browser-default" id="persons1" name="persons">&nbsp; &nbsp; &nbsp; &nbsp; <option value="1">Person Dropdown</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <select class="browser-default" id="animals1" name="animals">&nbsp; &nbsp; &nbsp; &nbsp; <option value="1">Animals Dropdown</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <select class="browser-default" id="fruits1" name="fruits">&nbsp; &nbsp; &nbsp; &nbsp; <option value="1">Fruits Dropdown</option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <br/>

Answer 2

您可以遍历所有具有相同名称并启用该单选按钮的单选按钮。此外，启用选择框使用 $("select[name='" + $(this).val() + "']").prop("disabled", false); 。演示代码：$(document).ready(function() {&nbsp; $("#type").change(function() {&nbsp; //disable other select&nbsp; &nbsp;$('select:not(#type)').prop("disabled", true);&nbsp; &nbsp; $("input").prop("checked", false);&nbsp; &nbsp; $("input").prop('disabled', false);&nbsp; &nbsp; $("input[type='radio']").prop("disabled", true);&nbsp; &nbsp; //looping through all inputs&nbsp; $("input[name='" + $(this).val() + "']").each(function(){&nbsp; &nbsp;$(this).prop("disabled", false); //remove disable&nbsp; })&nbsp; //remove disabled from slect&nbsp;$("select[name='" + $(this).val() + "']").prop("disabled", false);&nbsp;&nbsp; }).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">&nbsp; <option value="persons">persons</option>&nbsp; <option value="animals">animals</option>&nbsp; <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">&nbsp; <option value="1">Person Dropdown</option></select><br/><select class="browser-default" id="animals1" name="animals">&nbsp; <option value="1">Animals Dropdown</option></select><br/><select class="browser-default" id="fruits1" name="fruits">&nbsp; <option value="1">Fruits Dropdown</option></select><br/>