重置带有复选框的下拉菜单

Question

目前，我有一个复选框，当未选中时，下拉菜单将被禁用。在未选中的情况下，我还可以添加哪一行来重置下拉菜单？

    <body onload="enable_dropdown(false);">

<form name="f1" method="post" onload="enable_dropdown(false);">
<input type="checkbox" name="others" onclick="enable_dropdown(this.checked)" >Others

    <select id="that_select">
  <option value="a">A</option>
  <option value="b" selected>B</option>
  <option value="c">C</option>
</select></form>

我的Javascript

function enable_dropdown(status)
{
status=!status; 
document.f1.that_select.disabled = status;

}

Answer 1

试试这个：

function enable_dropdown(inputStatus)
{
  var selectElement =  document.getElementById("that_select");

  if(inputStatus == true)
  {
       // $(selectElement).removeAttr("disabled");
       selectElement.removeAttribute("disabled");
  }
  else
  {
        // $(selectElement).attr('disabled', 'disabled');
      selectElement.setAttribute("disabled","disabled");
  }

      // Then reset the select's selected index to clear current selection
      selecElement.selectedIndex = -1;
}

Answer 2

给你：

 <body onload="enable_dropdown(false);">
<form name="f1" method="post" onload="enable_dropdown(false);">

其他

<select id="that_select">
    <option value="a">A</option>
    <option value="b" selected>B</option>
    <option value="c">C</option>
</select></form>


 function enable_dropdown(status)
   {
     //status=!status; 
    var sel=document.getElementById('that_select');//document.f1.that_select.disabled
          if(status||false) sel.removeAttribute('disabled');
          else sel.setAttribute('disabled','disabled');
   }

Answer 3

使用jQuery

找到下面的代码

HTML

<form name="f1">
   <input type="checkbox" name="others" id="chk" > Others
   <select id="that_select" disabled>
     <option value="a">A</option>
     <option value="b" selected>B</option>
     <option value="c">C</option>
   </select>
</form>

jQuery

$('#chk').change(function(){ 
    if($('#chk').is(':checked')){
        $('#that_select').removeAttr('disabled');
    }
    else{
        $('#that_select').attr('disabled','disabled');
    }
});

JSFIDDLE DEMO

Answer 4

取决于您所说的 "reset the dropdown" 是什么意思。我明白你想让它重新select初始值，对吧？

最简单的解决方案是将其添加到您的 js 中：

document.f1.that_select.value = "b";

更优雅的方案：

<form name="f1" method="post" onload="enable_dropdown(false);">
    <input type="checkbox" name="others" onclick="enable_dropdown(this.checked)" >Others

    <select id="that_select">
        <option value="a">A</option>
        <option value="b" selected data-default="true">B</option>
        <option value="c">C</option>
    </select>
</form>

JS:

function enable_dropdown(status)
{
    var select = document.f1.that_select;

    status = !status;
    select.disabled = status;

    for (var i = 0; i < select.children.length; ++i) {
        if (select.children[i].dataset.default === "true") {
            select.value = select.children[i].value;
            break;
        }
    }
}

Answer 5

function enable_dropdown(b) {
  var b = !b;
  if (b) {
    document.f1.that_select.setAttribute("disabled", b);

  } else {
    document.f1.that_select.removeAttribute("disabled");
  }

}

<body onload="enable_dropdown(false)">

  <form name="f1" method="post">
    <input type="checkbox" name="others" onclick="enable_dropdown(this.checked)">Others
    <select id="that_select" name="that_select">
      <option value="a">A</option>
      <option value="b" selected>B</option>
      <option value="c">C</option>
    </select>
  </form>

</body>

希望对您有所帮助。

Answer 6

使用 JQuery 更容易 http://jsfiddle.net/spskqLwL/

<form name="f1" method="post">
<input type="checkbox" name="others">Others

<select id="that_select">
    <option value="a">A</option>
    <option value="b" selected>B</option>
    <option value="c">C</option>
</select></form>

jquery

$(function(){
    $("#that_select").prop('disabled',false);

    $("[type='checkbox']").change(function(){
        if($(this).is(":checked")) {
            $("#that_select").prop('disabled',true);
        }
        else{
            $("#that_select").prop('disabled',false);
        }
    });
});

重置带有复选框的下拉菜单

Reset a dropdown with a checkbox

javascript

checkbox