Disabled all other radio button if name and value not same

Question

I am making one form where I need to disable all other radio button and submit button if Radio button name or Id or class name not same to each other.

ID or name or class, I am generating through dynamic way. (name=radio_1, id= radio_1).

or

if I click on Group-1 radio button then other group should be disable.

Please have a look.

<label class="radio-inline">
<input type="radio" name="start_<?=$value['task_id']?>" class="group_<?=$value['task_id']?>" value="start_<?=$value['task_id']?>">
<input type="radio" name="start_<?=$value['task_id']?>" class="group_<?=$value['task_id']?>" value="start_<?=$value['task_id']?>">
<input type="submit" name="start_<?=$value['task_id']?>" value="Save" class="btn sm btn-primary group_<?=$value['task_id']?>">
</label>

<label class="radio-inline">
<input type="radio" name="start_<?=$value['task_id']?>" class="group_<?=$value['task_id']?>" value="start_<?=$value['task_id']?>">
<input type="radio" name="start_<?=$value['task_id']?>" class="group_<?=$value['task_id']?>" value="start_<?=$value['task_id']?>">
<input type="submit" name="start_<?=$value['task_id']?>" value="Save" class="btn sm btn-primary group_<?=$value['task_id']?>">
</label>

HTML Output:

<label class="radio-inline">
<input type="radio" name="start_1" class="group_1" value="start_1">
<input type="radio" name="start_1" class="group_1" value="start_1">
<input type="submit" name="start_1" value="Save" class="btn sm btn-primary group_1">
</label>

<label class="radio-inline">
<input type="radio" name="start_2" class="group_2" value="start_2">
<input type="radio" name="start_2" class="group_2" value="start_2">
<input type="submit" name="start_2" value="Save" class="btn sm btn-primary group_2">
</label>

My Query:

$(document).ready(function() {
$("input:radio").click(function() {
    var val = $(this).val();
    var name = $(this).attr('name');
    if(val != name){
      $(this).attr("disabled", true);
    }
    else{
    $(this).attr("disabled", false);
    }
});

});

Please guide me how can I do this.

i cant understand what you are trying to implement do want to disable the selected radio if the `id` ,`name` and `class` are not same . — Reborn, Nov 13 '17 at 06:25
I think you should set/remove 'disabled' in a different way. Is this answering your question: https://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery ? — zdolny, Nov 13 '17 at 06:32
I want - if I click on Group-1 radio button then other group should be disable. — Kuntal Parbat, Nov 13 '17 at 06:35

score 1 · Answer 1 · answered Nov 13 '17 at 06:53

You can use the Attribute selector with != to get all other input not having the same name inside label with specific class as in below code snippet. I have selected all inputs inside class='radio-inline so that it will not effect other input tags on the page.

below is the code snippet you can use. Hope this helps you.

$(document).ready(function() {
  $("input:radio").click(function() {
    $(".radio-inline input[name!='" + $(this).val() + "']").prop('disabled', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
<input type="radio" name="start_1" class="group_1" value="start_1">
<input type="radio" name="start_1" class="group_1" value="start_1">
<input type="submit" name="start_1" value="Save" class="btn sm btn-primary group_1">
</label>

<label class="radio-inline">
<input type="radio" name="start_2" class="group_2" value="start_2">
<input type="radio" name="start_2" class="group_2" value="start_2">
<input type="submit" name="start_2" value="Save" class="btn sm btn-primary group_2">
</label>

<label class="radio-inline">
<input type="radio" name="start_3" class="group_3" value="start_3">
<input type="radio" name="start_3" class="group_3" value="start_3">
<input type="submit" name="start_3" value="Save" class="btn sm btn-primary group_3">
</label>

score 1 · Answer 2 · answered Nov 13 '17 at 06:56

Try This:-

$(document).ready(function() {
    $("input:radio").click(function() {

        var val = $(this).val();

        var class_name = $(this).attr('class');
        var name = $(this).attr('name');

        //disable radio by class name
        $('input:radio').each(function() {
            if ($(this).attr('class') != class_name) {
                $(this).attr("disabled", true);
            } else {
                $(this).attr("disabled", false);
            }
        });

        //disable button by  name
        $('input:submit').each(function() {

            if ($(this).attr('name') != name) {
                $(this).attr("disabled", true);
            } else {
                $(this).attr("disabled", false);
            }
        });

    });

});

You are disabling all the input radio and submit button on ready itself. — Makarand Patil, Nov 13 '17 at 07:06

score 1 · Answer 3 · answered Nov 13 '17 at 07:00

1

$(document).ready(function(){
    $('input:radio').on('click',function(){
    $('input[name!="'+$(this).val()+'"]').attr('disabled',true);
 });
});

try this: https://jsfiddle.net/bch31up4/

answered Nov 13 '17 at 07:00

Shuyou

71
5

Seriously buddy. that's a copy paste of other answer. – Makarand Patil Nov 13 '17 at 07:14
Thank you Makarand, but I am really a newbie to Stackoverflow community, and don't know how to copy paste yet :-) – Shuyou Nov 16 '17 at 08:54

score 0 · Answer 4 · answered Nov 13 '17 at 07:03

Try this:

$(document).on("click", "input[type='radio']", function() {
  var val = $(this).val();
  $("input[type='radio']").each(function() {
    var name = $(this).attr('name');
    if (val != name) {
      $(this).attr("disabled", true);
    } else {
      $(this).attr("disabled", false);
    }
  });
});

FIDDLE

Disabled all other radio button if name and value not same

4 Answers4