如果名称和值不相同，则禁用所有其他单选按钮

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.

Answer 1

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>

</div>