jQuery: re-enable selected and disabled option
I'm trying to re-enable the selected and disabled option from the drop-down list once they are "removed" from the added list. Can anyone please help me. Many thanks in advance. Following is what I've got so far, and here http://jsfiddle.net/N2jyy/2/ demo page.
$(document).ready(function() {
$('#Add-开发者_运维百科btn').live('click',function() {
$(document.body).append($("<div>"));
var a = $('#a').val();
$("#tabName tr:first").before("<tr><td class='greyed'><input type='hidden' name='added_a' value='" + a + "'>" + a + "</td><td style='background:transparent;'><input type='button' class='delete' value='Remove'></td></tr>");
$("#a option:selected").attr("disabled", true);
});
$('#tabName td .delete').live('click',function() {
// here I want to re-enable the select option ...removeAttr('disabled');
$(this).parent().parent().remove();
return false;
});
});
You can do it like this:
$('#tabName td .delete').live('click',function() {
var val = $(this).closest('tr').remove().find('input').val();
$("#a option[value='" + val + "']").attr("disabled", false);
return false;
});
Give it a try here, what this does it goes up to the <tr>
then down to the <input>
while at the same time removing the <tr>
, then we're using that value to select the option you want to re-enable.
Just as an alternative, you can do this by index as well:
$(document).ready(function() {
$('#Add-btn').live('click', function() {
$(document.body).append($("<div>"));
var a = $('#a').val();
$("#tabName tr:first").before("<tr><td class='greyed'><input type='hidden' name='added_a' value='" + a + "'>" + a + "</td><td style='background:transparent;'><input type='button' class='delete' value='Remove'></td></tr>");
$("#a option:selected").attr("disabled", true);
});
$('#tabName td .delete').live('click', function() {
var delindex = $(this).parent().prev().find('input').val() - 1;
$("#a option:eq(" + delindex + ")").removeAttr("disabled");
$(this).parent().parent().remove();
return false;
});
});
精彩评论