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

Question

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

Jsfiddle link

例如：如果 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

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

Answer 2

您可以遍历所有具有相同名称的单选按钮并启用该单选按钮。此外，要启用选择框，请使用 $("select[name='" + $(this).val() + "']").prop("disabled", false);。

演示代码：

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