Bật và tắt các nút radio Tùy thuộc vào lựa chọn người dùng

Question

Tôi đang tìm cách viết jQuery để chỉ bật các nút radio tùy thuộc vào các nút radio hiện được chọn theo một số logic nghiệp vụ.

Về cơ bản có 3 nhóm 3 nút radio, mà cuối cùng phải tìm một cái gì đó tương tự (xin lỗi tôi vì đã tiết với ví dụ HTML này, nhưng hy vọng điều này sẽ hiển thị những gì tôi có nghĩa):

<p> 
    <label for="group_one">Group One</label> 
</p> 
<p> 
    <div class="group_one"> 
    <div id="group_one_choice_one"> 
     <label for="group_one_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" id="choice_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div id="group_one_choice_two"> 
     <label for="group_one_choice_two">Choice Two</label> 
     <br /> 
     <input id="group_one_choice_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div id="group_one_choice_three"> 
     <label for="group_one_choice_three">Choice Three</label> 
     <br /> 
     <input id="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_two">Group Two</label> 
</p> 
<p> 
    <div class="group_two"> 
    <div id="group_two_choice_one"> 
     <label for="group_two_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" id="choice_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div id="group_two_choice_two"> 
     <label for="group_two_choice_two">Choice Two</label> 
     <br /> 
     <input id="group_two_choice_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div id="group_two_choice_three"> 
     <label for="group_two_choice_three">Choice Three</label> 
     <br /> 
     <input id="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_three">Group Three</label> 
</p> 
<p> 
    <div class="group_three"> 
    <div id="group_three_choice_one"> 
     <label for="group_three_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" id="choice_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div id="group_three_choice_two"> 
     <label for="group_three_choice_two">Choice Two</label> 
     <br /> 
     <input id="group_three_choice_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div id="group_three_choice_three"> 
     <label for="group_three_choice_three">Choice Three</label> 
     <br /> 
     <input id="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 

đâu nó được khôn lanh là logic cần thiết để xác định các nút radio để hiển thị và cho phép. Người dùng phải chọn một lựa chọn từ mỗi nhóm, nhưng không thể lặp lại cùng một lựa chọn từ nhóm này sang nhóm khác.

Lý tưởng nhất là khi người dùng truy cập trang, tất cả các nút radio sẽ khả dụng nhưng không được chọn.

Nếu người dùng lần đầu tiên chọn (ví dụ) Lựa chọn hai trong nhóm ba, kịch bản sau đó sẽ vô hiệu hóa lựa chọn hai trong cả hai nhóm một và nhóm hai. Nếu người dùng sau đó chọn Lựa chọn thứ ba trong Nhóm hai, thì sau đó người dùng chỉ nên bật Lựa chọn thứ nhất trong Nhóm Một, v.v.

Mọi trợ giúp sẽ rất, rất được đánh giá cao. Tôi sẽ đăng bài jQuery tôi đã cố gắng viết để giải quyết vấn đề này nhưng tôi không nghĩ rằng tôi đã đi về điều này rất tốt và sẽ yêu bất kỳ sự giúp đỡ làm việc thông qua nó. Cảm ơn!

Answer 1

Tôi bỏ qua các lớp đặc biệt.

$("input[type=radio]").click(function() { 
    $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled"); 
    $(this).removeAttr("disabled"); 
}); 

Tùy thuộc vào yêu cầu của bạn, bạn có thể không cần dòng cuối cùng - nó chỉ bật lại radio hiện tại. Html của bạn cũng bị thiếu tên cho các nút radio của bạn.

Answer 2

Thứ nhất, bạn thực sự không có id trùng lặp trong mã của mình.

Tôi sẽ tạo tất cả các ID duy nhất, sau đó cung cấp cho hộp radio của bạn tên lớp - class="choice_three" chẳng hạn.

Bạn có thể cung cấp id cho div, chọn theo id nhanh hơn so với lớp, ví dụ: id="group_three".

Sau đó, để chọn một nút radio, chỉ cần sử dụng đoạn mã sau:

$("#group_three .choice_three").attr("disabled", "disabled"); 

Lưu ý, không gian giữa #group_three và .choice_three là quan trọng.

Hoặc thậm chí nhanh hơn:

$("#group_three input:radio.choice_three").attr("disabled", "disabled"); 

Một điều cần lưu ý là tốt, nhãn "cho" nên được cho nút radio, không phải là div.

Answer 3

Nếu bạn thêm các lớp speial vào cùng một lựa chọn, ví dụ: class = "choice_one", và sau đó trong xử lý sự kiện của bạn, bạn có thể:

if ($this).hasClass("choice_one") { $(".choice_one").attr("disabled", "disabled"); } 
else if ($this).hasClass("choice_two") { ... } 
... 

Answer 4

Bạn có thể có thể sử dụng một cái gì đó tương tự (tôi đã không kiểm tra này, nó chỉ là để có được bóng lăn ...)

Ý tưởng là: bất cứ khi nào bạn nhấp vào radio, vô hiệu hóa tất cả các radio trong tất cả các nhóm có giá trị đó, ngoại trừ một nhóm vừa được nhấp.

$(document).ready(function() { 
    $("input[type=radio]").click(function() { 
     var val = $(this).val(); 
     var $all_radios = $("input[type=radio]").filter("[value=" + val + "]"); 
     $all_radios.not($(this)).attr('disabled', 'disabled'); 
     return true; 
    }); 
}); 

Answer 5

Xong & thử nghiệm, đây là jQuery:

$(document).ready(function() { 
    $('input:radio').click(function() { 
     //reset all the radios 
     $('input:radio').removeAttr('disabled'); 
     if($(this).is(':checked')) { 
      var val = $(this).val(); 
      //disable all the ones with the same value 
      $('input:radio').each(function() { 
       if(val == $(this).val()) { 
        $(this).attr('disabled',true); 
       } 
      }); 
      //let's not disable the one we have just clicked on 
      $(this).removeAttr('disabled'); 
     } 
    }); 
}); 

và đánh dấu modded:

<p> 
    <label for="group_one">Group One</label> 
</p> 
<p> 
    <div class="group_one"> 
    <div> 
     <label for="group_one_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" name="group_one" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_one_choice_two">Choice Two</label> 
     <br /> 
     <input name="group_one" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_one_choice_three">Choice Three</label> 
     <br /> 
     <input name="group_one" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_two">Group Two</label> 
</p> 
<p> 
    <div class="group_two"> 
    <div> 
     <label for="group_two_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" name="group_two" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_two_choice_two">Choice Two</label> 
     <br /> 
     <input name="group_two" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_two_choice_three">Choice Three</label> 
     <br /> 
     <input name="group_two" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 
<p> 
    <label for="group_three">Group Three</label> 
</p> 
<p> 
    <div class="group_three"> 
    <div> 
     <label for="group_three_choice_one">Choice One</label> 
     <br /> 
     <input checked="checked" name="group_three" type="radio" value="1" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_three_choice_two">Choice Two</label> 
     <br /> 
     <input name="group_three" type="radio" value="2" /> 
     <br /> 
    </div> 
    <div> 
     <label for="group_three_choice_three">Choice Three</label> 
     <br /> 
     <input name="choice_three" type="radio" value="3"/ > 
     <br /> 
    </div> 
    </div> 
</p> 

Changes để đánh dấu:

• Chấn thoát khỏi khu vực nội DIVID s .
• Đã thay đổi các thuộc tính ID của radio thành NAME, vì vậy chúng hoạt động như các nút radio .