Question

我有一个选择框。

<select>

    <option> one </option>

    <option> two </option>

    <option> three </option>

 </select>

当我使用attr（'disabled'，'disabled'）禁用它并再次重新启用它时，不会保留先前选择的状态。任何想法如何保留它们？

编辑：我在这里附加Jsfiddle。

禁用它后，以及在其他包装器中附加相同的选择框时，不会保留所选的值。

Answer 1

这样做的一种方法是将当前值保存在临时字段中或临时JS变量中，当您启用它时，将其放回。

var t1 = '';

//at disable
t1 = document.getElementById('select_1').value;

//at enable
document.getElementById('select_1').value = t1;

如果您有多个选择框，可以将它们保存在数组中：

var t2 = [];

或者，您可以为每个选择框使用遮罩层：

<div id="mask_select_1" style="display:none; position:absolute; z-index:100;
width:80px; height:60px; background:#000000;
filter:alpha(opacity=00);
-moz-opacity:0.00;
opacity: 0.00;">&nbsp;</div>

设置宽度和宽度高度根据您的可见大小，而不是DISABLE，只需简单地使这个掩码div display:inline。因此，当您想要启用时，请将其设为display:none

为了方便起见，您还需要处理div id以匹配选择框ID

Answer 2

如果您只是想阻止用户修改它，请将其设为只读而不是禁用它：

$("#selectbox").attr('readonly', 'readonly')

更新

现在您已经澄清了您的问题与复制select框有关，这是一个解决方案：

jQuery("select").change(function () {
    jQuery(this).attr("disabled", "disabled");
});

jQuery("button").click(function () {
    jQuery("select").removeAttr("disabled");
    jQuery('.wrapper').append(jQuery('.select-wrapper:first select').clone(true).val(jQuery('.select-wrapper:first select').val()));
});

FIDDLE

当你复制HTML时，你得到的只是DOM元素。 HTML中不包含对用户交互的输入元素的更改。因此，此解决方案使用.clone()复制select元素，然后将原始选择框的当前值复制到克隆。

Answer 3

保存状态并将其设置回来：

$('#selectId').data('state', $('#selectId').val()).prop('disabled', true);
//sowhere else in the code 
$('#selectId').prop('disabled', false).val($('#selectId').data('state'));

这样您就不必处理变量了。

Answer 4

适合我的工作

我为演示添加了一个小提琴，

http://jsfiddle.net/fyjGE/

  <select id="demo">
   <option value="1"> one </option>
   <option value="2"> two </option>
   <option value="3" selected="selected"> three </option>
  </select>
 <button id="enable_dropdown">Enable</button>
 <button id="disable_dropdown">Disable</button>

JS：

  jQuery(document).ready(function(){
    jQuery('body').on('click', '#disable_dropdown', function(){
      jQuery('#demo').attr('disabled', 'disabled');
    });

  jQuery('body').on('click', '#enable_dropdown', function(){
    jQuery('#demo').removeAttr('disabled');
   });

  });

Answer 5

据我所知状态意味着 - 所选选项会发生变化。以下代码在我的浏览器中正常工作。但是如果你仍然遇到同样的问题，那么取消注释所有注释行。我希望这对你有用。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>

    <select id="select">
        <option> one </option>
        <option> two </option>
        <option> three </option>
    </select>

    <input type="button" id="enable" value="Enable" />
    <input type="button" id="disable" value="Disable" />

    <script>
        //var index = 0;
        $('#enable').click(function () {
            $('select').removeAttr('disabled');
            //document.getElementById('select').selectedIndex = index;
        });

        $('#disable').click(function () {
            //index = document.getElementById('select').selectedIndex;
            $('select').attr('disabled', 'disabled');
        });
    </script>
</body>
</html>

Answer 6

我找到了解决问题的方法。

看看演示，

http://jsfiddle.net/manojmcet/S7CqH/

<强>的javascript

$(document).ready(function(){
    $('#disable').on('click', function(){
        $('#demo').attr('disabled', 'disabled');
    })

  $('#enable').on('click', function(){
       $('#demo').removeAttr('disabled');
    })

});

<强> HTML：

<select >
    <option value="1"> one </option>

<option value="2"> two </option>

<option value="3" id="demo"> three </option>
</select>
<button id="enable">Enable</button>
<button id="disable">Disable</button>

如何在不取消选中所选选项的情况下禁用选择框？

6 个答案: