span - obtener el texto de un button jquery

jQuery deshabilita las opciones de SELECCIONAR según la Radio seleccionada(necesita soporte para todos los navegadores)

Question

Está bien tener un poco de problemas aquí, quería desactivar algunas de las opciones al seleccionar una radio. Cuando se selecciona ABC, desactive las opciones 1,2 y 3, etc.

$("input:radio[@name=''abc123'']").click(function() {
if($(this).val() == ''abc'') {
// Disable
$("''theOptions'' option[value=''1'']").attr("disabled","disabled");
$("''theOptions'' option[value=''2'']").attr("disabled","disabled");
$("''theOptions'' option[value=''3'']").attr("disabled","disabled");
} else {
// Disbale abc''s
}
});
ABC: <input type="radio" name="abc123" id="abc"/>
123: <input type="radio" name="abc123" id="123"/>
<select id="theOptions">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

No funciona ninguna idea?

ACTUALIZAR:

Ok, activé / inhabilité el funcionamiento, pero surgió un nuevo problema. Las opciones deshabilitadas para mi cuadro de selección solo funcionan en FF e IE8. He probado IE6 y el deshabilitado no funciona. Intenté usar hide () y show () sin suerte tampoco. básicamente necesito ocultar / deshabilitar / eliminar las opciones (para todos los navegadores) y poder agregarlas de nuevo si se selecciona la otra opción de radio y viceversa.

CONCLUSIÓN:

Gracias por todas las soluciones, la mayoría de ellas respondieron mi pregunta original. Mucho PROPS para todos :)

Answer 1

La forma correcta de lograr la funcionalidad que desea es simplemente eliminar las opciones. Como descubriste por las malas, la desactivación de las opciones individuales no se admite particularmente bien en todos los navegadores. Me acabo de despertar y tengo ganas de programar algo, así que preparé un pequeño complemento para filtrar fácilmente una selección según el atributo de identificación seleccionado de la radio. Aunque el resto de las soluciones harán el trabajo, si planea hacerlo a través de su aplicación, esto debería ayudar. Si no, entonces creo que es para cualquier otra persona que tropieza con esto. Aquí está el código del complemento que puedes esconder en alguna parte:

jQuery.fn.filterOn = function(radio, values) {
return this.each(function() {
var select = this;
var options = [];
$(select).find(''option'').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data(''options'', options);
$(radio).click(function() {
var options = $(select).empty().data(''options'');
var haystack = values[$(this).attr(''id'')];
$.each(options, function(i) {
var option = options[i];
if($.inArray(option.value, haystack) !== -1) {
$(select).append(
$(''<option>'').text(option.text).val(option.value)
);
}
});
});
});
};

Y aquí está cómo usarlo:

$(function() {
$(''#theOptions'').filterOn(''input:radio[name=abc123]'', {
''abc'': [''a'',''b'',''c''],
''123'': [''1'',''2'',''3'']
});
});

El primer argumento es un selector para el grupo de radio, el segundo es un diccionario donde las claves son la identificación de radio para que coincida, y el valor es una matriz de lo que deben permanecer los valores de opción de selección. Hay muchas cosas que se pueden hacer para resumir esto, házmelo saber si estás interesado y ciertamente podría hacer eso.

Aquí hay una demostración de esto en acción .

EDITAR : Además, se olvidó de agregar, de acuerdo con la documentation jQuery:

En jQuery 1.3, los selectores de estilo [@attr] se eliminaron (estaban previamente desaprobados en jQuery 1.2). Simplemente elimine el símbolo ''@'' de sus selectores para que funcionen nuevamente.

Answer 2

Quieres algo como esto - Código de ejemplo aquí

$(function() {
$("input:radio[@name=''abc123'']").click(function() {
if($(this).attr(''id'') == ''abc'') {
// Disable 123 and Enable abc
$("#theOptions option[value=''1'']").attr("disabled","disabled");
$("#theOptions option[value=''2'']").attr("disabled","disabled");
$("#theOptions option[value=''3'']").attr("disabled","disabled");
$("#theOptions option[value=''a'']").attr("selected","selected");
$("#theOptions option[value=''a'']").attr("disabled","");
$("#theOptions option[value=''b'']").attr("disabled","");
$("#theOptions option[value=''c'']").attr("disabled","");
} else {
// Disable abc''s and Enable 123
$("#theOptions option[value=''a'']").attr("disabled","disabled");
$("#theOptions option[value=''b'']").attr("disabled","disabled");
$("#theOptions option[value=''c'']").attr("disabled","disabled");
$("#theOptions option[value=''1'']").attr("selected","selected");
$("#theOptions option[value=''1'']").attr("disabled","");
$("#theOptions option[value=''2'']").attr("disabled","");
$("#theOptions option[value=''3'']").attr("disabled","");
}
});
});

EDITAR:

Versión mejorada del código, que usa expresiones regulares para filtrar las opciones en función de los valores de las opciones. Ejemplo de trabajo aquí . Puede editar el ejemplo agregando /edit a la URL

$(function() {
$("input:radio[@name=''abc123'']").click(function() {
// get the id of the selected radio
var radio = $(this).attr(''id'');
// set variables based on value of radio
var regexDisabled = radio == ''abc'' ? /[1-3]/ : /[a-c]/;
var regexEnabled = radio == ''abc'' ? /[a-c]/ : /[1-3]/;
var selection = radio == ''abc'' ? ''a'' : 1;
// select all option elements who are children of id #theOptions
$("#theOptions option")
// filter the option elements to only those we want to disable
.filter( function() { return this.value.match(regexDisabled);})
// disable them
.attr("disabled","disabled")
// return to the previous wrapped set i.e. all option elements
.end()
// and filter to those option elements we want to enable
.filter( function() { return this.value.match(regexEnabled);})
// enable them
.attr("disabled","");
// change the selected option element in the dropdown
$("#theOptions option[value=''" + selection + "'']").attr("selected","selected");
});
});

EDICION 2:

Dado que el atributo desactivado no parece funcionar de manera confiable en todos los navegadores, creo que su única opción es eliminar los elementos de opción que no se necesitan cuando se selecciona un botón de opción. Ejemplo de trabajo aquí

 $(function() {
$("input:radio[@name=''abc123'']").click(function() {
// store the option elements in an array
var options = [];
options[0] = ''<option value="1">1</option>'';
options[1] = ''<option value="2">2</option>'';
options[2] = ''<option value="3">3</option>'';
options[3] = ''<option value="a">a</option>'';
options[4] = ''<option value="b">b</option>'';
options[5] = ''<option value="c">c</option>'';
var radio = $(this).attr(''id'');
var regexEnabled = radio == ''abc'' ? /[a-c]/ : /[1-3]/;
// set the option elements in #theOptions to those that match the regular expression
$("#theOptions").html(
$(options.join(''''))
// filter the option elements to only those we want to include in the dropdown
.filter( function() { return this.value.match(regexEnabled);})
);
});
});

o incluso

 $(function() {
// get the child elements of the dropdown when the DOM has loaded
var options = $("#theOptions").children(''option'');
$("input:radio[@name=''abc123'']").click(function() {
var radio = $(this).attr(''id'');
var regexEnabled = radio == ''abc'' ? /[a-c]/ : /[1-3]/;
// set the option elements in #theOptions to those that match the regular expression
$("#theOptions").html(
$(options)
// filter the option elements to only those we want to include in the dropdown
.filter( function() { return this.value.match(regexEnabled);})
);
});
});

Answer 3

Si desea deshabilitar algunas opciones, entonces el siguiente código debería funcionar

$("input:radio[name=''abc123'']").click(function() {
var value = $(this).val();
$("option[value=''1''], option[value=''2''], option[value=''3'']", "#theOptions").each(function(){
this.disabled = value == ''abc'';
});
$("option[value=''a''], option[value=''b''], option[value=''c'']", "#theOptions").each(function(){
this.disabled = value == ''123'';
})
});

y los botones de radio

ABC: <input type="radio" name="abc123" value="abc" id="abc"/>
123: <input type="radio" name="abc123" value="123" id="123"/>

Si desea eliminar las opciones de la lista de selección, entonces use este código

$(function(){
var options = null;
$("input:radio[name=''abc123'']").click(function() {
var value = $(this).val();
if(options != null)options.appendTo(''#theOptions'');
if(value == ''abc'' )
options = $("option[value=''1''], option[value=''2''], option[value=''3'']", "#theOptions").remove();
else if(value == ''123'')
options = $("option[value=''a''], option[value=''b''], option[value=''c'']", "#theOptions").remove();
});
});

Por cierto. mi código usa la versión estable actual de jQuery (1.3.2). Si está utilizando una versión anterior, deberá cambiar los selectores de atributos a la sintaxis antigua.

opción [value = ''1''] a la opción [@ value = ''1'']

Answer 4

Tu selector está equivocado. En lugar de

$("''theOptions'' option[value=''1'']")

Deberías usar

$("#theOptions > option[value=''1'']")

Consulte también la documentation jQuery. Y eche un vistazo a la suggestion de aman.tur.

Answer 5

el primer problema es con

$(this).val()

reemplazarlo con

$(this).attr(''id'') == ''abc''

entonces esto no funcionará

$("''theOptions''..")

utilizar

$("#theOptions option[value=''1'']").attr(''disabled'',''disabled'') //to disable
$("#theOptions option[value=''a'']").attr(''disabled'','''') //to ENABLE

Answer 6

qué navegador estás usando? Nunca lo he usado antes, pero parece que no está soportado en IE antes de IE8. Mira este link para más información:

http://www.w3schools.com/TAGS/att_option_disabled.asp

Answer 7

simplemente arregle el selector $("''theOptions'' option[value=''1'']") a $("#theOptions option[value=''1'']") y todo funcionará bien

Answer 8

$(":radio[name=abc123]").click(function() {
var $options = $("#theOptions")
var toggle = ($(this).val() == ''abc'') ? true : false;
$("[value=1],[value=2],[value=3]", $options).attr("disabled", toggle);
$("[value=a],[value=b],[value=c]", $options).attr("disabled", !toggle);
});