通过单击＆＃34;编辑＆＃34;切换下拉选择从禁用到启用

Question

我有一个下拉选择输入字段，其中两个选项已被禁用。当用户点击“编辑”链接时，我正在尝试将选择从禁用切换到能够使用。

<select disabled> 
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<span class="hyperlink" onclick ="languageDropBox();">Edit</span>   


function languageDropBox(){
var html = '<select><option value="English">English</option><option value="Spanish">Spanish</option></select>';
}   

Answer 1

您可以通过删除“已禁用”属性来执行此操作。

$('select').removeAttr('disabled');

Answer 2

这是一个非常简单的过程，但有点混乱，因为残疾人财产是如此独立。

使用jQuery有两种简单的方法可以做到这一点。只需一个removeAttr，您只需删除该属性即可。像这样：

$('select').removeAttr('disabled');

使用另一个.prop，您可以使用布尔值来确定它是“开”还是“关”。如果您想切换它，这可能很有用。例如，在下文中，单击编辑将“关闭”禁用，而选择一个选项将“打开”禁用属性：

$('select').on('change', function(e) {
    $(this).prop('disabled', true)
});

$('.hyperlink').on('click', function(e) {
    $(this).prev('select').prop('disabled', false)
});

Working Example

---

就目前而言，看起来你可能会对如何跟上“谁”获得“什么”命令感到困惑。这也很容易。一种简单的方法是为每个元素分配id属性。然后就变得如此简单：

<select id="bob">...</select>
...
$("#bob").doSomething

在这里，我只是使用CSS选择器按ID选择元素。在这种情况下，对于id“bob”，我在我的jQuery选择器中使用#bob，（就像这部分$('selector goes here')）。

使用id有一个回归。您只能拥有一个唯一的ID纯元素。要拥有多个，不仅会变得令人困惑，只有第一个被JavaScript读取。因此，我喜欢使用“名称间距”和“类名”。名称间距仅仅意味着给出一个单独的名称来开始一些东西，使其与其他名称分开。正如您在我的js示例中看到的，我用于编辑按钮的“名称空间”是“编辑”。然后我按照它编辑的内容进行操作。在这种情况下，选择框。所以我最终得到了一个edit-select的类名，可以用来编辑具有该名称空间的所有元素的事件。

因此$('.edit-select').doStuff将导致为具有该名称空间的所有元素设置事件。所以我可以很容易地扩展它们的html，并且，只要disablled select 之前（因为我使用prev，请参阅下面的链接），它将仅影响该选择。

Example

---

链接到@：

• jQuery selectors
• .removeAttr
• .prop
• .attr
• .prev
• .on/.live
• jQuery callbacks
• How jQuery works

Answer 3

我认为这可能是一种更好的方法

<强> HTML：

<select disabled> 
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<button class="hyperlink">Edit</button>  

<强> jQuery的：

$(".hyperlink").click(function(){
    $("select").prop("disabled", false);
});

工作示例：http://jsfiddle.net/robcabrera/JKw5K/

修改

如果您有多个选择下拉列表，只需为每个选择下拉列表添加一个类名称

<强> 实施例

<select class="dropdown1">
     <option>This is # 1</option>
     <option>This is # 2</option>
     <option>This is # 3</option>
</select>

<select class="dropdown2">
     <option>This is # 1</option>
     <option>This is # 2</option>
     <option>This is # 3</option>
</select>

<强> jQuery的：

 $(".hyperlink").click(function(){
    $(".dropdown1").prop("disabled", false);
});

或

$(".hyperlink").click(function(){
    $(".dropdown2").prop("disabled", false);
});

或添加第二个按钮以启用第二个下拉列表

<强> HTML：

<button class="hyperlink2">Edit Second Dropdown</button> 

<强> jQuery的：

 $(".hyperlink").click(function(){
    $(".dropdown1").prop("disabled", false);
});

$(".hyperlink2").click(function(){
    $(".dropdown2").prop("disabled", false);
});

工作小提琴2：http://jsfiddle.net/robcabrera/2DE5z/

祝你好运！

Answer 4

<select disabled> 
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<span class="hyperlink" onclick ="languageDropBox();">Edit</span>   


function languageDropBox(){
 $("select").prop("disabled", false);
}   

Answer 5

您可以使用以下.removerAttr（）;

$（ '选择'）removeAttr（ '禁用'）;