Wie man andere Checkboxes löst Ereignis in jQuery ändern?

Question

Ich habe Kontrollkästchen in mehreren Zeilen.Wie ich bereits die Frage geschrieben habe, wie Sie das Symbol basierend auf Checkboxen Status aktivieren oder deaktivieren. https://stackoverflow.com/questions/36549999/how-to-enable-or-disable-a-image-based-on-the-checkbox-value-in-javascript?noredirect=1#comment60702059_36549999 Was meine Lösung ist, eine gleiche Klasse zu jedem Kontrollkästchen in allen Zeilen geben. Hinzufügen eines benutzerdefinierten Attributs, das jeder Zeile gemeinsam ist, und Erstellen einer Beziehung mit dem Zeilensymbol.

Ich habe unten Code versucht

//html 



    <tr> 
      <td style="text-align: left;">Summary/td> 
      <td> 
       <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="SummaryEditIcon"></td> 
      <td> 
       <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="SummaryEditIcon"></td> 

      <td> 
       <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="SummaryEditIcon"></td> 
      <td><a id="SummaryEditIcon"><img href="#"></a></td> 
     </tr> 
    <tr> 
      <td style="text-align: left;">Model/td> 
      <td> 
       <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="ModelEditIcon"></td> 
      <td> 
       <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="ModelEditIcon"></td> 

      <td> 
       <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="ModelEditIcon"></td> 
      <td><a id="ModelEditIcon"><img href="#"></a></td> 
     </tr> 

// js

$(".allCheckboxes").unbind.change(function(){ 

     var editIconId =$(this).attr("data-editIcon"); 
     if ($(this).prop("checked")) { 
      $("#"+editIconId).removeAttr("disabled"); 
     } 
     else{ 
      $("#"+editIconId).prop("disabled",true); 
      checkAndEnableEditIcon(editIconId); 
     } 
    }); 
}); 
function checkAndEnableEditIcon(editIconId) 
{ 
    var count = 0; 
    $(".allCheckboxes").each(function(){ 
     if($(this).attr("data-editIcon") == editIconId) 
     { 
      count++; 
      if ($(this).attr("checked")) { 
       $("#"+editIconId).removeAttr("disabled"); 
       return; 
      } 
     } 
     if(count == 3) 
     { 
      return; 
     } 
    }); 
} 

Der obige Code funktioniert nicht .. ich könnte die problem.Can jemand dies nicht erkennen, lösen Sie bitte.

Answer 1

Es sieht aus, dass viele Dinge in vielerlei Hinsicht falsch sind. Erster Blick:

1. HTML Zeilen, Tag Schließen /td> auf erste Zelle, beide Reihen nicht korrekt ist. Wechseln Sie zu </td>.
2. JQuery-Code sollte .unbind() sein, nicht nur .unbind
3. $(".allCheckboxes") nicht in Ihrem HTML existieren. Meinst Du $(".allchecks")?

nicht sicher, ob dies Ihre Absicht ist: https://jsfiddle.net/Twisty/Lw7nvgsr/

HTML

<table> 
    <tr> 
    <td style="text-align: left;">Summary</td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="SummaryEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="SummaryEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="SummaryEditIcon"> 
    </td> 
    <td> 
     <a id="SummaryEditIcon"><img href="#"></a> 
    </td> 
    </tr> 
    <tr> 
    <td style="text-align: left;">Model</td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="ModelEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="ModelEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="ModelEditIcon"> 
    </td> 
    <td> 
     <a id="ModelEditIcon"><img href="#"></a> 
    </td> 
    </tr> 
</table> 

JQuery

$(document).ready(function() { 
    $(".allchecks").unbind().change(function() { 
    var editIconId = $(this).attr("data-editIcon"); 
    if ($(this).prop("checked")) { 
     console.log("Enabling " + editIconId); 
     $("#" + editIconId).removeAttr("disabled"); 
    } else { 
     console.log("Disabling " + editIconId); 
     $("#" + editIconId).prop("disabled", true); 
     checkAndEnableEditIcon(editIconId); 
    } 
    }); 

    function checkAndEnableEditIcon(editIconId) { 
    var count = 0; 
    $(".allchecks").each(function() { 
     if ($(this).attr("data-editIcon") == editIconId) { 
     count++; 
     if ($(this).attr("checked")) { 
      $("#" + editIconId).removeAttr("disabled"); 
      return; 
     } 
     } 
     if (count == 3) { 
     return; 
     } 
    }); 
    } 
}); 

Auch mit diesen Änderungen, vermute ich, nichts davon ist so arbeiten, wie Sie es wollen zu und das ist eher ein logisches Problem als ein Code-Problem. Sie geben in Ihrem anderen Post, ", wenn eines der Kontrollkästchen aktiviert ist, ein Bild in der entsprechenden Zeile muss angezeigt werden." Das machte nicht viel Sinn für mich, bis ich es mehrmals gelesen habe. Ich denke, was Sie meinen ist, dass, wenn eines der Kontrollkästchen in dieser Zeile aktiviert ist, nach dem Änderungsereignis das Bild für diese Zeile sichtbar wird.

Um dies zu erhalten, sollten Sie den Rat der im letzten Beitrag genommen haben: 1) Wie erhalten Sie Wert der Checkbox? 2) Wie man Bild versteckt/zeigt? Suche sie auf SO oder Google - es gibt viele Antworten. - Alexander Trakhimenok. Überprüfen Sie den Wert jedes Kontrollkästchens und zeigen Sie dann ein Bild an oder blenden Sie es aus. Dies ist eine Möglichkeit, es zu tun:

https://jsfiddle.net/Twisty/Lw7nvgsr/4/

HTML

<table> 
    <tr> 
    <td style="text-align: left;">Summary</td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="SummaryEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="SummaryEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="SummaryEditIcon"> 
    </td> 
    <td> 
     <a id="SummaryEditIcon" href="#"><img src="https://cdn0.iconfinder.com/data/icons/business-finance-11/100/icon-37-128.png" /></a> 
    </td> 
    </tr> 
    <tr> 
    <td style="text-align: left;">Model</td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="1" data-editIcon="ModelEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="2" data-editIcon="ModelEditIcon"> 
    </td> 
    <td> 
     <input type="checkbox" class="allchecks" checked="checked" name="Summary" value="3" data-editIcon="ModelEditIcon"> 
    </td> 
    <td> 
     <a id="ModelEditIcon" href="#"><img src="https://image.freepik.com/free-icon/summary_318-101407.png"></a> 
    </td> 
    </tr> 
</table> 

JQuery

$(document).ready(function() { 
    $(".allchecks").change(function(e) { 
    loopRow($(this).parent().parent()); 
    }); 

    function loopRow(r) { 
    console.log("Checking Row " + r[0].rowIndex); 
    var showImg = false; 
    $(r).find(".allchecks").each(function(k, v) { 
     if ($(v).is(":checked")) { 
     console.log("Found Check in row ", r); 
     showImg = true; 
     } 
    }); 
    if (showImg) { 
     $(r).find("td:last-child img").show(); 
    } else { 
     $(r).find("td:last-child img").hide(); 
    } 
    } 

    $("table tr").each(function() { 
    loopRow($(this)); 
    }); 
}); 

das Rad nicht Stören Sie remaking. Nutzen Sie die verfügbaren Werkzeuge.Wenn ein Kontrollkästchen geändert wird, durchlaufen Sie alle Kontrollkästchen in dieser Zeile, sehen Sie, ob ein Kontrollkästchen .is(":checked"). Dies wird true oder false zurückgeben, also markieren Sie es, wenn Sie ein Kontrollkästchen gefunden haben.

Wenn alle 3 deaktiviert sind, bleibt das Flag falsch und das Bild wird ausgeblendet. Wenn Sie möchten, können Sie .remove() und .append() das Bild ein und aus. Eine weitere Methode, um den Fluss und das Rendern beizubehalten, besteht darin, das Attribut visible über CSS umzuschalten.

Zuletzt loopiere ich jede Zeile in der Tabelle, wenn die Seite geladen wird, und prüfe in jeder Zeile nach Prüfungen.