Quiero agregar una identificación única a la entrada.

Esta es mi entrada:

foreach( $subItems AS $item ) {
    <input type="checkbox" id="checkbox_sub" class=" flat"name="sub_elements[]" required="required">                                                                            

    <input type="text" id="sub_min_points" name="sub_min_points[]" disabled> 
}

Ejemplo de identificadores generados:

<input type="checkbox" id="checkbox_sub_id1" class=" flat"name="sub_elements[]" required="required">
<input type="checkbox" id="checkbox_sub_id2" class=" flat"name="sub_elements[]" required="required">
<input type="checkbox" id="checkbox_sub_id3" class=" flat"name="sub_elements[]" required="required">
<input type="checkbox" id="checkbox_sub_id4" class=" flat"name="sub_elements[]" required="required">
<input type="text" id="sub_min_points_id1" name="sub_min_points[]" disabled>
<input type="text" id="sub_min_points_id2" name="sub_min_points[]" disabled>
<input type="text" id="sub_min_points_id3" name="sub_min_points[]" disabled>
<input type="text" id="sub_min_points_id4" name="sub_min_points[]" disabled>

Entonces quiero habilitar la entrada si la casilla de verificación está marcada.

Usé este código para habilitar la entrada después de verificarla, pero el problema es que funciona solo en la primera entrada ya que las entradas generadas no tienen identificadores únicos

$('#checkbox_sub').on('ifChecked', function(event){
    $('#sub_min_points').removeAttr('disabled');
});
$('#checkbox_sub').on('ifUnchecked', function(event){
    $( '#sub_min_points_' ).attr( "disabled" , 'disabled') ;
});

El código anterior tiene métodos de este complemento Icheck


Aclaración de mi idea:

Cree identificadores únicos para entradas insertadas dinámicamente por foreach, luego use la variable en la casilla de verificación marcada y desmarcada

Ejemplo:

Esto es solo una aclaración, no sé cómo hacerlo en JS usando el valor de incremento ++i y agregar al id="" y usar la identificación completa después de agregar la variable de incremento a la identificación original para cambiar el atributo de todos

$('#checkbox_sub+i+').on('ifChecked', function(event){
    $('#sub_min_points+i+').removeAttr('disabled');
});
$('#checkbox_sub+i+').on('ifUnchecked', function(event){
    $( '#sub_min_points+i+' ).attr( "disabled" , 'disabled') ;
});

Lo que necesito :

  • #checkbox_sub_1 cuando se marca -> #sub_min_points_1 disabled atributo será eliminado

  • #checkbox_sub_2 cuando se marca -> #sub_min_points_2 disabled atributo será eliminado

  • #checkbox_sub_3 cuando se marca -> #sub_min_points_3 disabled atributo se eliminará *

0
Mohamed Elkashef 12 oct. 2017 a las 04:40

2 respuestas

La mejor respuesta

No necesita ID de elemento para hacer esto, porque es posible escribir JS que diga "cuando se hace clic en el nésimo uno de estos elementos, actualice el nth uno de esos elementos ".

La siguiente es una forma de hacerlo, utilizando el .index() método de jQuery para calcular sacar el índice de la casilla de verificación seleccionada y el método .eq() para seleccionar el texto correspondiente entrada. Tenga en cuenta que dentro del controlador de eventos de clic, this se refiere al elemento en el que se hizo clic. Por cierto, he asumido que jQuery está bien aunque la pregunta no tenga la etiqueta "jQuery", porque se muestra el código jQuery en el cuerpo de la pregunta.

Tenga en cuenta que el foreach() que se muestra en la pregunta generaría las casillas de verificación y las entradas de texto en pares, no todas las casillas de verificación primero y luego todas las entradas de texto como se muestra en la pregunta en "Ejemplo de ID generados", por lo que en la siguiente demostración he usado HTML que los tiene en pares. Pero, el mismo JS funcionaría igual de bien si tuviera todas las casillas de verificación primero seguidas de todas las entradas de texto, porque (nuevamente) está usando las posiciones relativas de cada una para decidir cuál actualizar.

var cbs = $('input[name="sub_elements[]"]')
var inputs = $('input[name="sub_min_points[]"]')

cbs.on('click', function() {
  inputs.eq(cbs.index(this)).prop('disabled', !this.checked)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>

Además, debe inhabilitar y habilitar los campos con .prop("disabled", true) (o false), no use .removeAttr() y .attr().

Una segunda opción que funcionaría para el HTML que se muestra en el ejemplo anterior sería simplemente usar la navegación DOM {{X0 }} método, porque cuando se hace clic en la casilla de verificación, la entrada de texto asociada es literalmente el siguiente elemento en el DOM:

$('input[name="sub_elements[]"]').on('click', function() {
  $(this).next().prop('disabled', !this.checked)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
<input type="checkbox" class=" flat"name="sub_elements[]" required="required">
<input type="text" name="sub_min_points[]" disabled>
1
nnnnnn 12 oct. 2017 a las 03:06

Como estoy usando el complemento ICheck, el código anterior necesitaba ser editado así para trabajar conmigo

var cbs = $('input[name="sub_elements[]"]') ;
var inputs = $('input[name="sub_min_points[]"]') ;
cbs.on('ifChecked',  function(event) {
    inputs.eq(cbs.index(this)).prop('disabled', false)
})

cbs.on('ifUnchecked',  function(event) {
    inputs.eq(cbs.index(this)).prop('disabled', true)
})
0
Mohamed Elkashef 12 oct. 2017 a las 09:28