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

Question

J'ai besoin de changer certaines entrées de cases à cocher en entrées cachées pour certaines mais pas toutes les entrées 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 ne sélectionne que l'entrée par type, ce qui fait que toutes les cases à cocher sont transformées en entrées cachées. Existe-t-il un moyen de vérifier les deux types d'entrée input="checkbox" et name="ProductCode" comme sélecteur afin de pouvoir cibler spécifiquement ceux que je veux modifier ?

$("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
});

Answer 1

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 voulez sélectionner, mais comme la plupart des navigateurs modernes mettent en œuvre l'attribut document.getElementsByClassName qui sera utilisée pour sélectionner les éléments et qui sera beaucoup plus rapide que la sélection par la fonction name attribut

Answer 2

Vous pouvez combiner les sélecteurs d'attributs de cette manière :

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

de sorte qu'un élément doit satisfaire aux deux conditions. Bien entendu, vous pouvez utiliser cette méthode pour plus de deux éléments. De même, ne faites pas [type=checkbox] . jQuery possède un sélecteur pour cela, à savoir :checkbox donc le résultat final est :

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

Les sélecteurs d'attributs sont toutefois lents. Il est donc recommandé d'utiliser des sélecteurs d'ID et de classe lorsque cela est possible. Vous pourriez changer 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 beaucoup sélectionneur plus rapide de :

$("input.ProductCode")...

Answer 3

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

C'est la méthode CSS et je suis presque sûr qu'elle fonctionnera avec jQuery.