启用/禁用在 JQuery 中不起作用 [关闭]

Question

我有这个单选按钮。选中 no 时，必须禁用和取消选中下一个顶部单选按钮（这可行）。当用户点击 yes 时，接下来的两个单选按钮应该被启用并且可以点击。这就是问题所在 - 点击yes按钮仍然无法点击。我做错了什么。我的代码如下。感谢您的帮助！

$(document).ready(function() {
	$(".blind-7").attr('disabled', true);
	$(".blind-8").attr('disabled', true);
	$(".nebel-3").css('opacity', '0.1');
	
	$("form input:radio").change(function() {
		if ($('#033b').is(':checked')) {
			$(".blind-7, .blind-8").attr('disabled', true);
			$(".blind-7").prop('checked', false);
			$(".blind-8").prop('checked', false);
			$(".nebel-3").css('opacity', '0.1');
		}
		else if ($('#033a').is(':checked')) {
			$(".blind-7, .blind-8").attr('disabled', false);
			$(".nebel-3").css('opacity', '1');
		}
	});
});

.nebel {
	color: black;
	background: #F9CA83;
}

.nebel-3 {
	color: black;
	background: #F9CA83;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <label class="nebel" for="033">click here</label>
    <input id="033b" type="radio" name="question" value="0"checked> <label for="033b">no</label>
    <input id="033a" type="radio" name="question" value="1"> <label for="033a">yes</label>

    <label class="nebel-3" for="034">type</label>
    <input id="034b" class="blind-8" type="radio" name="type" value="0" > <label for="034b">A</label>
    <input id="034a" class="blind-7" type="radio" name="type" value="1"> <label for="034a">B</label><br />

    <label class="nebel-3" for="035">time</label>
    <input id="035b" class="blind-8" type="radio" name="time" value="0" > <label for="035b">acute</label>
    <input id="035a" class="blind-7" type="radio" name="time" value="1"> <label for="035a">chronic</label>

Answer 1

您在选择器中没有父 form。

将$("form input:radio") 更改为$("input:radio")。

$(document).ready(function() {
	$(".blind-7").attr('disabled', true);
	$(".blind-8").attr('disabled', true);
	$(".nebel-3").css('opacity', '0.1');

	$("input:radio").change(function() {
		if ($('#033b').is(':checked'))
		{
			$(".blind-7, .blind-8").attr('disabled', true);
			$(".blind-7").prop('checked', false);
			$(".blind-8").prop('checked', false);
			$(".nebel-3").css('opacity', '0.1');
		}
		else if ($('#033a').is(':checked'))
		{
			$(".blind-7, .blind-8").attr('disabled', false);
			$(".nebel-3").css('opacity', '1');
		}
	});
});

.nebel {
	color: black;
	background:#F9CA83;
}

.nebel-3 {
	color: black;
	background:#F9CA83;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="nebel" for="033">click here</label>
<input id="033b" type="radio" name="question" value="0"checked> <label for="033b">no</label>
<input id="033a" type="radio" name="question" value="1"> <label for="033a">yes</label>


<label class="nebel-3" for="034">preop_ad_type_a</label>
<input id="034b" class="blind-8" type="radio" name="type" value="0" > <label for="034b">A</label>
<input id="034a" class="blind-7" type="radio" name="type" value="1"> <label for="034a">B</label><br />

<label class="nebel-3" for="035">preop_ad_type_b</label>
<input id="035b" class="blind-8" type="radio" name="time" value="0" > <label for="035b">acute</label>
<input id="035a" class="blind-7" type="radio" name="time" value="1"> <label for="035a">chronic</label>

Answer 2

$("form input:radio").change 行正在尝试将更改侦听器附加到表单内的无线电类型的输入。

这不起作用，因为您的单选按钮周围没有<form> 标签。如果您像这样添加<form> 标签，它将起作用：

<form>
<label class="nebel" for="033">click here</label>
<input id="033b" type="radio" name="question" value="0"checked> <label for="033b">no</label>
<input id="033a" type="radio" name="question" value="1"> <label for="033a">yes</label>


<label class="nebel-3" for="034">preop_ad_type_a</label>
<input id="034b" class="blind-8" type="radio" name="type" value="0" > <label for="034b">A</label>
<input id="034a" class="blind-7" type="radio" name="type" value="1"> <label for="034a">B</label><br />

<label class="nebel-3" for="035">preop_ad_type_b</label>
<input id="035b" class="blind-8" type="radio" name="time" value="0" > <label for="035b">acute</label>
<input id="035a" class="blind-7" type="radio" name="time" value="1"> <label for="035a">chronic</label>
</form>`

或者，您可以将附加更改侦听器的行更新为： $("input:radio").change

这些都应该工作

Answer 3

修改这个$("form input:radio") 到这个$("input:radio")，因为你没有表单标签。

$(document).ready(function() {
    $(".blind-7").attr('disabled', true);
    $(".blind-8").attr('disabled', true);
    $(".nebel-3").css('opacity', '0.1');

    $("input:radio").change(function() {
        if ($('#033b').is(':checked')) {
            $(".blind-7, .blind-8").attr('disabled', true);
            $(".blind-7").prop('checked', false);
            $(".blind-8").prop('checked', false);
            $(".nebel-3").css('opacity', '0.1');
        }
        else if ($('#033a').is(':checked')) {
            $(".blind-7, .blind-8").attr('disabled', false);
            $(".nebel-3").css('opacity', '1');
        }
    });
});

.nebel {
    color: black;
    background: #F9CA83;
}

.nebel-3 {
    color: black;
    background: #F9CA83;
}

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DOM Example</title>
</head>
<body>
    <label class="nebel" for="033">click here</label>
    <input id="033b" type="radio" name="question" value="0"checked> <label for="033b">no</label>
    <input id="033a" type="radio" name="question" value="1"> <label for="033a">yes</label>

    <label class="nebel-3" for="034">preop_ad_type_a</label>
    <input id="034b" class="blind-8" type="radio" name="type" value="0" > <label for="034b">A</label>
    <input id="034a" class="blind-7" type="radio" name="type" value="1"> <label for="034a">B</label><br />

    <label class="nebel-3" for="035">preop_ad_type_b</label>
    <input id="035b" class="blind-8" type="radio" name="time" value="0" > <label for="035b">acute</label>
    <input id="035a" class="blind-7" type="radio" name="time" value="1"> <label for="035a">chronic</label>
</body>
</html>

Answer 4

	$(document).ready(function() {
  $(".blind-7").attr('disabled', true);
  $(".blind-8").attr('disabled', true);
  $(".nebel-3").css('opacity', '0.1');
	
$("input:radio").change(function() {
  if ($('#033b').is(':checked')) {
  $(".blind-7, .blind-8").attr('disabled', true);
  $(".blind-7").prop('checked', false);
  $(".blind-8").prop('checked', false);
  $(".nebel-3").css('opacity', '0.1');
}
else if ($('#033a').is(':checked')) {
	$(".blind-7, .blind-8").attr('disabled', false);
	$(".nebel-3").css('opacity', '1');
}
  });
});

.nebel {
  color: black;
  background:#F9CA83;
}

.nebel-3 {
  color: black;
  background:#F9CA83;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <label class="nebel" for="033">click here</label>
    <input id="033b" type="radio" name="question" value="0"checked> <label for="033b">no</label>
    <input id="033a" type="radio" name="question" value="1"> <label for="033a">yes</label>


    <label class="nebel-3" for="034">type/label>
    <input id="034b" class="blind-8" type="radio" name="type" value="0" > <label for="034b">A</label>
    <input id="034a" class="blind-7" type="radio" name="type" value="1"> <label for="034a">B</label><br />

    <label class="nebel-3" for="035">time</label>
    <input id="035b" class="blind-8" type="radio" name="time" value="0" > <label for="035b">acute</label>
    <input id="035a" class="blind-7" type="radio" name="time" value="1"> <label for="035a">chronic</label>