JQuery sta cambiando il valore della casella di controllo ma la casella di controllo non viene visualizzata come selezionata

Question

Ho una lista con una casella di controllo e del testo (come la posta in arrivo di posta elettronica). Voglio selezionare/deselezionare la casella quando clicco in qualsiasi punto della voce di elenco (riga). Ho usato il codice seguente al clic evento della fila:

$(this).find(".cbx input").attr('checked', true); 

Per prima volta, mostrano la casella di controllo selezionata. Ma quando clicco seleziono la prossima volta il valore della casella spuntata = aggiornamenti "controllati" nel codice html (ho controllato tramite firebug) ma la casella di controllo non viene visualizzata come selezionata.

Answer 1

Con .attr() si imposta il valore di un attributo nell'albero DOM. A seconda del browser, della versione del browser e della versione jQuery (in particolare 1.6), questo non ha sempre l'effetto desiderato.

Con .prop(), si modifica la proprietà (in questo caso, 'stato selezionato'). Vi consiglio vivamente di utilizzare .prop() nel tuo caso, in modo che il seguente commuta correttamente:

$(this).find(".cbx input").prop('checked', true); 

Per ulteriori informazioni, si prega di fare riferimento alla documentation of .prop().

Answer 2

Quasi giusto, basta usare 'verificato' invece di vero:

$(this).find(".cbx input").attr('checked', 'checked'); 

Aggiornamento: In alternativa, è possibile utilizzare questo con le versioni più recenti JQuery:

$(this).find(".cbx input").prop('checked', true); 

Answer 3

$("[id*='" + value + "'] input").prop('checked', false); 

attr anche lavorato (ma solo la prima volta) Ma prop funziona sempre.

Answer 4

useing **.prop()** it worked for me ! 

$(document).on("click",".first-table tr",function(e){ 
if($(this).find('input:checkbox:first').is(':checked')) 
{ 
    $(this).find('input:checkbox:first').prop('checked',false); 
}else 
{ 
    $(this).find('input:checkbox:first').prop('checked', true); 
} 
}); 

Answer 5

inizialmente niente ha funzionato per me in chrome sebbene funzionasse bene in mozilla. Più tardi scoprì che lo stile CSS personalizzato causava il segno di spunta non visibile.

Answer 6

facile, la soluzione è quella di utilizzare $ ('xxxxxx') .pop ('controllato', vero) o falsa Test OK in Jquery 1.11.x.

Acclamazioni

demo completa codice di esempio

Esempi: (casella codice JavaScript per un tavolo)

function checkswich() { 
     if ($('#checkbox-select').is(':checked') == true) { 
      selectTodo(); 
     } else { 
      deSelectTodo(); 
     } 
    } 
    function selectTodo() { 
     //$('#tabla-data input.ids:checkbox').attr('checked', 'checked'); 
     $('#tabla-data input.ids:checkbox').prop('checked', true); 
    } 
    function deSelectTodo() { 
     //$('#tabla-data input.ids:checkbox').removeAttr('checked', 'checked'); 
     $('#tabla-data input.ids:checkbox').prop('checked', false); 
    } 
    function invetirSelectTodo() { 
     $("#tabla-data input.ids:checkbox").each(function (index) { 
      //$(this).attr('checked', !$(this).attr('checked')); 
      $(this).prop('checked', !$(this).is(':checked')); 
     }); 
    } 

Esempi: (casella di controllo di codice HTML per un tabella)

  <table id="tabla-data" class="table table-striped table-bordered table-hover table-condensed"> 
       <thead> 
        <tr> 
         <th class="text-center" style="width: 5px"><span class="glyphicon glyphicon-check"></span></th> 
         <th>Engine</th> 
         <th><a href="#" class="">Browser</a></th> 
         <th class="td-actions text-center" style="width: 8%;">Acciones</th> 
        </tr> 
       </thead> 
       <tbody id="tabla-data" class="checkbox-data"> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td> 
         <td>#########</td> 
         <td>#######</td> 
         <td class="td-actions text-center"> 
          <?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?> 
         </td> 
        </tr> 
       </tbody> 
      </table> 

Esempio: (Codice ComponentHTML utilizzare JavaScript)

<form id="form-datos" action="/url/demo/blablaaa" method="post" enctype="multipart/form-data" style="visibility: hidden;" > 
<input type="hidden" name="accion" id="accion"> 

<div class="btn-group"> 
<span class="btn btn-default btn-xs"><input type="checkbox" id="checkbox-select" onclick="checkswich()"></span> 
<button type="button" class="btn btn-default btn-xs dropdown-toggle dropdown-toggle-check" data-toggle="dropdown" aria-haspopup="true" 
     aria-expanded="false"> 
    <span class="caret"></span> 
    <span class="sr-only">Options</span> 
</button> 
<ul class="dropdown-menu"> 
    <li><a href="#" onclick="accion()">Action Demo</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#" onclick="selectTodo()">Select All</a></li> 
    <li><a href="#" onclick="deSelectTodo()">UnSelet All</a></li> 
    <li><a href="#" onclick="invetirSelectTodo()">Inverse Select</a></li> 
</ul> 

Answer 7

Questa soluzione non ha funzionato per me (es. Impostazione dello stato controllato con puntello).

$("#checkbox-reminder").prop("checked", true); 

Mentre lo stato sottostante veniva sempre aggiornato correttamente, il display non veniva ridisegnato correttamente.

Questo può essere risolto con.

$("#checkbox-reminder").prop("checked", true).checkboxradio(); 
$('#checkbox-reminder').checkboxradio('refresh'); 

Vedere questo thread per ulteriori informazioni.