如果属性指定,复选框总是被解雇?

时间:2016-04-21 02:13:13

标签: javascript html node.js html5 pug

这让我完全疯了。我无法弄清楚如何通过JavaScript检查/取消选中复选框。

我的HTML文件中有以下内容:

<div class="form-group">
  <label class="col-sm-3 control-label"></label>
  <div class="col-sm-9">
    <div class="checkbox">
      <input id="hardhat" type="checkbox" name="hardhat" checked="false" class="flat"/> Does the employee need his own hardhat?
    </div>
  </div>
</div>

在Jade中将其转化为:

.form-group
  label.col-sm-3.control-label
    .col-sm-9
      .checkbox
         input#hardhat(type='checkbox', name='hardhat', class='flat', checked='false')
                            |  Does the employee need his own hardhat?

在HTML中使用checked属性将始终打开窗口并选中复选框。取消选中该复选框的唯一方法是删除checked属性。我错过了什么?

因此,我在JavaScript中没有检查/取消选中该复选框的工作:(。我试过这个:

var $modal = $('#editJob');
$modal.find('input#hardhat')['checked']=true;

非常感谢任何帮助!

编辑:

function showJobInfo(event) {

document.getElementById('editJob').style.display = "block";
document.getElementById('editJob').style.visibility = "visible";

// Prevent Link from Firing
event.preventDefault();

// Retrieve job title from link rel attribute
var thisJobTitle = $(this).attr('rel');

// Get Index of object based on id value
var arrayPosition = userJoblistData.map(function(arrayItem) { return arrayItem.title; }).indexOf(thisJobTitle);

// Get our Job Object
var thisJobObject = userJoblistData[arrayPosition];

// Populate the edit job popup window
var $modal = $('#editJob');
$modal.find('input#jobTitle').val(thisJobObject.title);
$modal.find('input#payRate').val(thisJobObject.payrate);
$modal.find('input#startDate').val(thisJobObject.durationstart);
$modal.find('input#endDate').val(thisJobObject.durationend);
$modal.find('input#workingHours').val(thisJobObject.workinghrs);
$modal.find('input#location').val(thisJobObject.location);

$('#hardhat').prop('checked', false);
}

2 个答案:

答案 0 :(得分:0)

我不明白是什么问题。如果您想要始终选中,请添加checked =&#34; true&#34; html属性。

https://jsfiddle.net/yw3obrrt/

<input id="hardhat" type="checkbox" name="hardhat" checked="true" class="flat"/>

检查玉器检查=&#39; true&#39;

input#hardhat(type='checkbox', name='hardhat', class='flat', checked='true')
                            |  Does the employee need his own hardhat?

对于测试,请不要使用F5,因为请记住您的选择。

如果不起作用..尝试使用jquery并使用

$(document).ready(function (){
     $("#hardhat").attr("checked",true);
});

https://jsfiddle.net/yw3obrrt/1/

答案 1 :(得分:0)

在你的例子中!!

$('#hardhat').prop('checked', false);

这一行,未选中复选框!

更改为

$('#hardhat').attr('checked', true);  // attr or prop

或对此进行评论并在html输入中添加checked =“true”!