标签属性disabled selected checked等布尔类型赋值不生效？

原生html

设置了false实际是true

    <select>
      <option>1</option>
      <option>2</option>
      <option selected>3</option>
      <option selected=false>4</option>
    </select>
1
2
3
4
5
6

以上的代码实际上select默认选中4

其实无论你让selected=0 selected=false selected=none 等等，这里都被认为是设置为true
因为在原生的html中，所有属性的赋值其实都是一个字符串，对布尔属性赋值字符串，会被强制转化为布尔值，所以"false" =>true “0” => true …

所以从某种意义上，我们只有利用js或者jquery对其进行赋予布尔值
这样被默认选中的是第4个

 <select>
   <option>1</option>
   <option>2</option>
   <option selected>3</option>
   <option id="option4">4</option>
 </select>

 var option4 = document.getElementById("option4")
 option4.selected = true
1
2
3
4
5
6
7
8
9

react中布尔值属性只能设置为布尔值

设置false被认为无效，默认选择3

      <select>
        <option>1</option>
        <option>2</option>
        <option selected>3</option>
        <option selected={false}>4</option>
      </select>
1
2
3
4
5
6

设置undefined实际上就是false，最终默认选择3

      <select>
        <option>1</option>
        <option>2</option>
        <option selected>3</option>
        <option selected={undefined}>4</option>
      </select>
1
2
3
4
5
6

当然也可以设置表达式来判断，默认选择4

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

      <select>
        {
          options.map((item) => {
            return <option key={item} selected={item === 4} >
              {item}
            </option>
          })
        }
      </select>
    </div>
  );
}

export default Login;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

但是这样可能会报一个警告 react-dom.development.js:86 Warning: Use the defaultValue or value props on instead of setting selected on .
意思就是让你直接在select标签设置value或者defaultValue而不是给option设置selected

这样默认选中的就是2

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

      <select value={2}>
        {
          options.map((item) => {
            return <option key={item} >
              {item}
            </option>
          })
        }
      </select>
    </div>
  );
}

export default Login;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

react中其它布尔属性是否与selected的表现一致

只有第4个input被禁用

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

        {
          options.map((item) => {
            return <input key={item} disabled={item === 4} />
          })
        }
    </div>
  );
}

export default Login;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

只有第4个checkbox被选中

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

        {
          options.map((item) => {
            return <input type="checkbox" key={item} checked={item === 4} />
          })
        }
    </div>
  );
}

export default Login;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

所有的input都不是read模式，可以正常输入

import React, { useState } from "react";
import { Link } from "react-router-dom";
const Login: React.FC = () => {
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

        {
          options.map((item) => {
            return <input key={item} readOnly={false} />
          })
        }
    </div>
  );
}

export default Login;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

经过多种布尔值的测试，react中布尔值属性表现保持一致

vue中设置布尔属性

单独设置为false，其实为true。实际上默认选中的是3

 <select>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3" selected>3</option>
   <option value="4" :selected="false">4</option>
 </select>
1
2
3
4
5
6

如果通过data属性的方式，可以实现false的传值，默认选中的是3

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected>3</option>
  <option value="4" :selected="selected1">4</option>
</select>

export default class Home extends Vue {
  selected1 = false
}
</script>
1
2
3
4
5
6
7
8
9
10
11

当然判断式也是可以的，一般选择===的方式判断，默认选中第2个

<select>
  <option v-for="item in options" :key="item" value="item" :selected="item === 2">
    {{ item }}
  </option>
</select>
export default class Home extends Vue {
  options = [1, 2, 3, 4]
}
</script>
1
2
3
4
5
6
7
8
9

vue其它的布尔值属性与selected一致吗？

只有第二个input被禁用了

<input v-for="item in options" :key="item" value="item" :disabled="item === 2" />
export default class Home extends Vue {
	options = [1, 2, 3, 4]
}
1
2
3
4

全部false生效 都没被禁用

    <input v-for="item in options" :key="item" value="item" :disabled="false" />
1

全部true生效 都被禁用

    <input v-for="item in options" :key="item" value="item" :disabled="true" />
1

checked disabled readonly 基本所有的布尔类型表现都是如此