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

Posted 2023-05-07

【中文标题】启用/禁用选择/下拉菜单和下拉单选按钮？

【英文标题】：Enable/Disable select/dropdown and Radio button on dropdown selected?

【发布时间】：2020-10-18 17:49:20

【问题描述】：

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

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");
    )

【参考方案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/>

【参考方案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/>