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

您可以将属性选择器与!=一起使用，以使用特定类在标签内获取所有其他不具有相同名称的输入，如下面的代码段所示。我选择了class='radio-inline内的所有输入，这样就不会影响页面上的其他输入标记。

下面的

是您可以使用的代码段。希望这会对你有所帮助。

$(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>

Answer 2

试试这个： -

$(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);
            }
        });

    });

});

Answer 3

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

试试这个：https://jsfiddle.net/bch31up4/

Answer 4

试试这个：

$(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 个答案: