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

取决于“重置下拉列表”的含义。我知道你希望它重新选择初始值，对吗？

最简单的解决方案是将此添加到您的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 2

试试这个：

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 3

你走了：

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

使用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 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);
        }
    });
});

使用复选框重置下拉列表

6 个答案: