Q&A
プルダウンを選択することで
プルダウンをクローンしています。
ジャンル2のラジオボタンをチェックした場合のみ
プルダウンで選択後、プルダウンと消すボタンを新たに作らないようにしたいです。
コメントアウト「ジャンル2を選択した場合にプルダウンを選択しても、
プルダウンをクローンしない」の下方「クローンを初期化して追加」のあたりに
クローンをキャンセルするイベントを追加すればよいのかと思っていますが、
どのように書けばよろしいでしょうか。
HTML
1 2 3 4 <form> 5 <fieldset> 6 <div> 7 <table> 8 <tbody> 9 <tr> 10 <td> 11 <ul> 12 <li> 13 <div> 14 <label> 15 <input type="radio" name="admin_select" id="follower_select" value="admin_master" checked="checked"> 16 <span>ジャンル１</span> 17 </label> 18 </div> 19 </li> 20 <li> 21 <div> 22 <label> 23 <input type="radio" name="admin_select" id="admin_select" value="admin_follower"> 24 <span>ジャンル２</span> 25 </label> 26 </div> 27 </li> 28 </ul> 29 </td> 30 </tr> 31 <tr> 32 <td> 33 <div class="js-check-all-follower text-left form-radio--nolabel"> 34 <label> 35 <input type="radio" name="sub_follower_flag" id="follower_select_all" value="all"> 36 <span>Good!</span> 37 </label> 38 <label> 39 <input type="radio" name="sub_follower_flag" id="follower_select_individual" value="individual" checked="checked"> 40 <span>Bad</span> 41 </label> 42</div> 43 44 <div class="input-form__select-wrapper js-select-follower" style=""> 45 <div> 46 <select name="sub_follower_ids[]" style="color: rgb(0, 0, 0);"> 47 <option value="" selected>理由</option> 48 <option value="a">()</option> 49 <option value="b">候補A 50 </option> 51 <option value="c">候補B </option> 52 <option value="d">候補C </option> 53 54 <option value="e">候補D</option> 55 <option value="f">候補E 56 </option> 57 </select> </div> 58 <div class="button--detail js-delete-follower" style="display: none;"> 59 <button type="button">消す</button> 60 </div> 61 </div> 62 </td> 63 </tr> 64 </tbody> 65 </table> 66 </div> 67 </fieldset> 68 </form> 69 70
jquery
1 2 3$(function () { 4 // Good 5 $(".js-check-all-follower input:checkbox") 6 .on("change", function () { 7 if ($(this).is(":checked")) { 8 $(this) 9 .closest(".js-check-all-follower") 10 .siblings(".js-select-follower") 11 .hide(); 12 } else { 13 $(this) 14 .closest(".js-check-all-follower") 15 .siblings(".js-select-follower") 16 .show(); 17 } 18 }) 19 .trigger("change"); 20 21 // クローン 22 var selectable_follower_count = 23 $(".js-select-follower select").find("option").length - 1; 24 $(".js-select-follower select") 25 .on("change", function () { 26 var $parent = $(this).closest(".js-select-follower"); 27 var $deleteBtn = $parent.find(".js-delete-follower"); 28 29 if ($(this).val() === "") { 30 $deleteBtn.hide(); 31 } else { 32 $deleteBtn.show(); 33 34 if ( 35 !$parent.hasClass("is-replicated") && 36 $(".js-select-follower select").length < selectable_follower_count 37 ) { 38 // クローンを初期化して追加 39 var $clone = $parent.clone(true); 40 $clone.find("select").val(""); 41 $clone.find(".js-delete-follower").hide(); 42 $parent.parent().append($clone); 43 44 // クローンを作るのは一度だけ 45 $parent.addClass("is-replicated"); 46 } 47 48 else if ( 49 $('#admin_select2:checked').val() 50 ) { 51 // クローンを初期化して追加 52 var $clone = $parent.clone(true); 53 var $test = $clone.find("select").val("").preventDefault(); 54 $test.preventDefault(); 55 // クローンを作るのは一度だけ 56 $parent.addClass("is-replicated").off(); 57 } 58 59 60 } 61 }) 62 .trigger("change"); 63 64 65 66 $(".js-delete-follower") 67 .find("button") 68 .on("click", function (e) { 69 e.preventDefault(); 70 if ($(".js-select-follower").length !== 1) { 71 $(this).closest(".js-select-follower").remove(); 72 } 73 74 if ($(".js-select-follower").length === 1) { 75 $(".js-delete-follower").hide(); 76 $(".js-select-follower").removeClass("is-replicated"); 77 } 78 }); 79}); 80 81// ジャンル選択でプルダウンクリア 82$(function () { 83 $('input[name="admin_select"]:radio').change(function () { 84// プルダウンを削除し、デフォルト状態にする 85 $(".js-delete-follower").find("button").trigger('click'); 86 87 var radioval = $(this).val(); 88 if (radioval == "admin_follower") { 89 $(".js-check-all-follower").addClass("d-none"); 90 } else { 91 $(".js-check-all-follower").removeClass("d-none"); 92 } 93 if (radioval == "admin_follower") { 94 $(".js-select-follower").removeClass("d-none"); 95 $(".js-delete-follower") 96 .find("button") 97 .on("click", function (e) { 98 e.preventDefault(); 99 if ($(".js-select-follower").length !== 1) { 100 $(this).closest(".js-select-follower").remove(); 101 } 102 103 if ($(".js-select-follower").length === 1) { 104 $(".js-delete-follower").hide(); 105 $(".js-select-follower").removeClass("is-replicated"); 106 } 107 }); 108 109 110 // ジャンル2を選択した場合にプルダウンを選択しても、プルダウンをクローンしない 111 var selectable_follower_count = 112 $(".js-select-follower select").find("option").length - 1; 113 $(".js-select-follower select") 114 .on("change", function () { 115 var $parent = $(this).closest(".js-select-follower"); 116 var $deleteBtn = $parent.find(".js-delete-follower"); 117 118 if ($(this).val() === "") { 119 $deleteBtn.hide(); 120 } else { 121 $deleteBtn.show(); 122 123 if ( 124 !$parent.hasClass("is-replicated") && 125 $(".js-select-follower select").length < selectable_follower_count 126 ) { 127 // クローンを初期化して追加 128 var $clone = $parent.clone(true); 129 $clone.find("select").val(""); 130 131 } 132 } 133 }) 134 .trigger("change"); 135 136 137 } 138 139 140 141 142 }); 143}); 144 145// 146// Goodを選択するとプルダウンが非表示となる 147$(document).on("change", 'input:radio[name="sub_follower_flag"]', function () { 148 var radioval = $(this).val(); 149 if (radioval == "all") { 150 $(".js-select-follower").addClass("d-none"); 151 } else { 152 $(".js-select-follower").removeClass("d-none"); 153 } 154 155}); 156 157 158
回答1件
0
下のようなコードで可能かと思います。
２６行目、
１０５行目辺りに、ジャンル2の判定メソッドを追加しました。
Javascript
1$(function () { 2 // Good 3 $(".js-check-all-follower input:checkbox") 4 .on("change", function () { 5 if ($(this).is(":checked")) { 6 $(this).closest(".js-check-all-follower").siblings(".js-select-follower").hide(); 7 } else { 8 $(this).closest(".js-check-all-follower").siblings(".js-select-follower").show(); 9 } 10 }) 11 .trigger("change"); 12 13 // クローン 14 var selectable_follower_count = $(".js-select-follower select").find("option").length - 1; 15 $(".js-select-follower select") 16 .on("change", function () { 17 var $parent = $(this).closest(".js-select-follower"); 18 var $deleteBtn = $parent.find(".js-delete-follower"); 19 20 if ($(this).val() === "") { 21 $deleteBtn.hide(); 22 } else { 23 $deleteBtn.show(); 24 25 if (!$parent.hasClass("is-replicated") && $(".js-select-follower select").length < selectable_follower_count) { 26 // ジャンル２のラジオボタン 27 var button_2 = $("#admin_select"); 28 // ジャンル２が選択されていた場合の判定 29 if (button_2.prop("checked")) { 30 } else { 31 // クローンを初期化して追加 32 var $clone = $parent.clone(true); 33 $clone.find("select").val(""); 34 $clone.find(".js-delete-follower").hide(); 35 $parent.parent().append($clone); 36 37 // クローンを作るのは一度だけ 38 $parent.addClass("is-replicated"); 39 } 40 } else if ($("#admin_select2:checked").val()) { 41 // クローンを初期化して追加 42 var $clone = $parent.clone(true); 43 var $test = $clone.find("select").val("").preventDefault(); 44 $test.preventDefault(); 45 // クローンを作るのは一度だけ 46 $parent.addClass("is-replicated").off(); 47 } 48 } 49 }) 50 .trigger("change"); 51 52 $(".js-delete-follower") 53 .find("button") 54 .on("click", function (e) { 55 e.preventDefault(); 56 if ($(".js-select-follower").length !== 1) { 57 $(this).closest(".js-select-follower").remove(); 58 } 59 60 if ($(".js-select-follower").length === 1) { 61 $(".js-delete-follower").hide(); 62 $(".js-select-follower").removeClass("is-replicated"); 63 } 64 }); 65}); 66 67// ジャンル選択でプルダウンクリア 68$(function () { 69 $('input[name="admin_select"]:radio').change(function () { 70 // プルダウンを削除し、デフォルト状態にする 71 $(".js-delete-follower").find("button").trigger("click"); 72 73 var radioval = $(this).val(); 74 if (radioval == "admin_follower") { 75 $(".js-check-all-follower").addClass("d-none"); 76 } else { 77 $(".js-check-all-follower").removeClass("d-none"); 78 } 79 if (radioval == "admin_follower") { 80 $(".js-select-follower").removeClass("d-none"); 81 $(".js-delete-follower") 82 .find("button") 83 .on("click", function (e) { 84 e.preventDefault(); 85 if ($(".js-select-follower").length !== 1) { 86 $(this).closest(".js-select-follower").remove(); 87 } 88 89 if ($(".js-select-follower").length === 1) { 90 $(".js-delete-follower").hide(); 91 $(".js-select-follower").removeClass("is-replicated"); 92 } 93 }); 94 95 // ジャンル2を選択した場合にプルダウンを選択しても、プルダウンをクローンしない 96 var selectable_follower_count = $(".js-select-follower select").find("option").length - 1; 97 $(".js-select-follower select") 98 .on("change", function () { 99 var $parent = $(this).closest(".js-select-follower"); 100 var $deleteBtn = $parent.find(".js-delete-follower"); 101 102 if ($(this).val() === "") { 103 $deleteBtn.hide(); 104 } else { 105 // ジャンル２のラジオボタン 106 var button_2 = $("#admin_select"); 107 // ジャンル２が選択されていた場合の判定 108 if (button_2.prop("checked")) { 109 $deleteBtn.hide(); 110 } else { 111 $deleteBtn.show(); 112 } 113 114 if (!$parent.hasClass("is-replicated") && $(".js-select-follower select").length < selectable_follower_count) { 115 // クローンを初期化して追加 116 var $clone = $parent.clone(true); 117 $clone.find("select").val(""); 118 } 119 } 120 }) 121 .trigger("change"); 122 } 123 }); 124}); 125 126// 127// Goodを選択するとプルダウンが非表示となる 128$(document).on("change", 'input:radio[name="sub_follower_flag"]', function () { 129 var radioval = $(this).val(); 130 if (radioval == "all") { 131 $(".js-select-follower").addClass("d-none"); 132 } else { 133 $(".js-select-follower").removeClass("d-none"); 134 } 135}); 136
投稿2020/05/31 08:42
総合スコア806
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。