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

Question

我正在制作一个表单，如果单选按钮 name 或 Id 或 class 名称，我需要禁用所有其他单选按钮和提交按钮彼此不相同。

ID或name或class，我是通过动态方式生成的。 (name=radio_1，id= radio_1)。

或

如果我单击 Group-1 单选按钮，则应禁用其他组。

请看一下。

<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 输出:

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

我的查询:

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

});

请指导我该怎么做。

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>