entrée cible par type et nom (sélecteur)

Je dois changer certaines entrées de case à cocher en entrées masquées pour certaines entrées mais pas toutes sur une page.

<input type="checkbox" name="ProductCode"value="396P4"> 
<input type="checkbox" name="ProductCode"value="401P4"> 
<input type="checkbox" name="ProductCode"value="F460129">

Le code jquery ci-dessous sélectionne uniquement l'entrée par type, ce qui fait que toutes les cases à cocher sont remplacées par des entrées masquées. que je veux changer?

$("input[type='checkbox']").each(function(){
var name = $(this).attr('name'); // grab name of original
var value = $(this).attr('value'); // grab value of original
var html = '<input type="hidden" name="'+name+'" value="'+value+'" />';
$(this).after(html).remove(); // add new, then remove original input
});

Vous voulez un sélecteur d'attributs multiples

$("input[type='checkbox'][name='ProductCode']").each(function(){ ...

ou

$("input:checkbox[name='ProductCode']").each(function(){ ...

Il serait préférable d'utiliser une classe CSS pour identifier ceux que vous souhaitez sélectionner, car de nombreux navigateurs modernes implémentent la document.getElementsByClassNameméthode qui sera utilisée pour sélectionner des éléments et sera beaucoup plus rapide que la sélection par l' nameattribut

Vous pouvez combiner les sélecteurs d'attributs de cette façon:

$("[attr1=val][attr2=val]")...

de sorte qu'un élément doit satisfaire les deux conditions. Bien sûr, vous pouvez l'utiliser pendant plus de deux. Ne fais pas non plus [type=checkbox]. jQuery a un sélecteur pour cela, à savoir :checkboxsi le résultat final est:

$("input:checkbox[name=ProductCode]")...

Les sélecteurs d'attributs sont cependant lents, donc l'approche recommandée consiste à utiliser des sélecteurs d'ID et de classe lorsque cela est possible. Vous pouvez modifier votre balisage en:

<input type="checkbox" class="ProductCode" name="ProductCode"value="396P4"> 
<input type="checkbox" class="ProductCode" name="ProductCode"value="401P4"> 
<input type="checkbox" class="ProductCode" name="ProductCode"value="F460129">

vous permettant d'utiliser le sélecteur beaucoup plus rapide de:

$("input.ProductCode")...

input[type='checkbox', name='ProductCode']

C'est la méthode CSS et je suis presque sûr que cela fonctionnera dans jQuery.