如何使用复选框启用和禁用数字字段？
[英]How to enable and disable a number field using a checkbox?
问题描述
How can I generate aa pair consisting of a checkbox and number field such that they are partnered with each other? 
如何生成一个由复选框和数字字段组成的对，使它们彼此配对？ (Clicking checkbox disables its partner number field) （单击复选框将禁用其合作伙伴编号字段）
Javascript File: Javascript文件：
$(document).ready(function(){
$("input[name=check]").click(function(){
$("input[name=number]").attr("disabled", "disabled");
});
}); }）;
Laravel/html file Laravel / HTML文件
<!DOCTYPE html>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="js/bootstrap.min.js" rel="stylesheet">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/validator.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
nav {
width: 105%;
background: #2591f5;
min-height: 50px;
color: white;
}
nav img {
max-height: 48px;
}
nav * {
float: left;
}
#sidebar {
height: 95%;
background: grey;
overflow: hidden;
}
.sidebar-box-lg{
height: 50px;
width: 108%;
background: #2591f5;
margin-top: 5%;
font-size: 16pt;
color: white;
text-align: center;
}
.sidebar-box-sm{
height: 50px;
width: 100%;
background: #2591f5;
margin-top: 5%;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: white;
text-align: left;
float: left;
overflow: hidden;
min-width: 50px;
}
.sidebar-box-sm div{
font-size: 30px;
margin: 10px;
width: 10%;
float: left;
}
.sidebar-box-sm:hover{
background-color: white;
color: #2591f5;
transition: all 0.5s;
}
.sidebar-box-sm .text{
font-size: 16px;
width: 65%;
}
.header{
background: #2591f5;
top: 0px;
left: 0px;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
height: 75px;
border-bottom: 10px groove grey;
/*background: url("logo.png") no-repeat left; */
background-size: 80px;
background-position: 30px 3px;
}
#content-pane{
}
.box-lg {
width: 40%;
height: 150px;
background: #2591f5;
color: white;
font-size: 30px;
padding: 5px;
float: left;
margin: 30px;
}
.subtext {
font-size: 20px;
}
.button-ribbon{
background: grey;
font-size: 15px;
margin-left: -1%;
position:absolute;
padding: 10px;
bottom:30px;
}
</style>
@extends('layouts.default')
@section('content')
<h1> Homeroom Grade </h1>
<!-- opening the form -->
{{ Form::open(array('url' => 'students/create', 'method' => 'PUT')) }}
<table border="0" name="table1" class="SampleTables table table-hover">
<thead>
<tr><th>Last Name</th>
<th>First Name</th>
<th>Grade</th></tr>
</thead>
@foreach($students as $stud)
<tr><td>{{ $stud->LName }} </td>
<td> {{ $stud->FName }} </td>
<td>{{Form::checkbox("check", "$stud->Homeroom_Grade=0")}}{{Form::number("number", $stud->Homeroom_Grade, array('min' => '70', 'max' => '100') )}}</td></tr>
<td></td>
@endforeach
</table>
<!-- Save button -->
<button> Reset </button>
{{Form::submit('Save')}}
<!-- Closing the form -->
{{ Form::close() }}
@stop
1 个解决方案
解决方案1
1 已采纳 2015-04-18 14:04:55
You should use .change() to detect when the checkbox has been fired: 您应该使用.change()来检测何时触发该复选框：
$("input[name=check]").change(function() {
if($(this).is(":checked")) $(this).parent().find("input[name=number]").attr("disabled","disabled");
else $(this).parent().find("input[name=number]").removeAttr("disabled");
});
Like above, you should check if the checkbox is :checked or not to set the disabled value. 像上面一样，您应该检查复选框是否为:checked ，以设置禁用值。
Then, you can search the checkbox's parent() to find the correct sibling to disable. 然后，您可以搜索复选框的parent()以找到要禁用的正确同级对象。
Demo: http://jsfiddle.net/zj88pLe6/3/ 演示： http ： //jsfiddle.net/zj88pLe6/3/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.