启用/禁用不在JQuery中工作

时间：2018-01-16 23:34:41

标签： javascript jquery html css radio-button

我有这个单选按钮。选中否时，必须禁用并取消选中下一个顶部单选按钮（这样可行）。当用户点击是时，应启用并点击下两个单选按钮。这是问题所在 - 通过单击是，按钮仍然无法点击。我弄错了。我的代码如下。感谢您的帮助！

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

4 个答案:

答案 0 :(得分：1)

只需修改此$("form input:radio") 到此$("input:radio")，因为您没有表单标记。

＆＃13;
＆＃13; 
$(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');
        }
    });
});
＆＃13; 
.nebel {
    color: black;
    background: #F9CA83;
}

.nebel-3 {
    color: black;
    background: #F9CA83;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

这不起作用，因为您的单选按钮周围没有<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

其中任何一个都应该起作用

答案 2 :(得分：1)

选择器中没有父form。

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

＆＃13;
＆＃13; 
$(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');
		}
	});
});
＆＃13; 
.nebel {
	color: black;
	background:#F9CA83;
}

.nebel-3 {
	color: black;
	background:#F9CA83;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

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

相关问题
最新问题