我使用Bootstrap Colorpicker 2.1在一个窗体中显示两个颜色选择器。使用一个输入，一切都很好，然而，当我添加第二个输入时，只有第一个输入有效。也许是因为他们共享同一个类…
知道为什么会发生这种事吗？
<form method="post">
<p><?php _e("Box 1: " ); ?>
<input
class="form-control demo"
data-horizontal="true"
id="demo_forceformat"
placeholder="<?php echo $box1?>"
type="text"
name="box1"
value="<?php echo $box1?>"
size="20">
<?php _e(" Default: rgba(14,112,209,1)" ); ?></p>
<p><?php _e("Box 2 " ); ?>
<input
class="form-control demo"
data-horizontal="true"
id="demo_forceformat"
placeholder="<?php echo $box2?>"
type="text"
name="box2"
value="<?php echo $box2?>"
size="20">
<?php _e(" Default: rgba(144,112,209,1)" ); ?></p>
这可能与共享相同的id有关。
id对于页面上的每个元素都应该是唯一的。
将id="demo_forceformat"更改为id="demo_forceformat2"，甚至更好，使id属性的值与name属性的值相同。对表单元素使用相同的id和name值是一种常见的约定。
我需要使用调用函数
$(function(){
$('#demo_forceformat_2').colorpicker({
format: 'rgba', // force this format
horizontal: true
});
});